javaScript进阶-事件委派

对其中的事件委派做一些自己的理解：


hrml代码如下

<h2>
Great Web resources</h2>
<ul id="resources">
<li><a href="http://www.zhihu.com">Opera Web Standards Curriculum</a></li>
<li><a href="http://sitepoint.com">Sitepoint</a></li>
<li><a href="http://alistapart.com">A List Apart</a></li>
<li><a href="http://yuiblog.com">YUI Blog</a></li>
<li><a href="http://blameitonthevoices.com">Blame it on the voices</a></li>
<li><a href="http://oddlyspecific.com">Oddly specific</a></li>
</ul>

javascript代码如下

$(document).ready(function () {
var resources = document.getElementById("resources");
var links = resources.getElementsByTagName("a");
var all = links.length;
for (var i = 0; i < all; i++) {
links[i].addEventListener('click', handler, false);
}
}）;

function handler(e) {
var x = e.target; //Get the link that was clicked The DOM element that initiated the event
alert(x);
e.preventDefault();//阻止事件的默认操作
}

　注意这里：


这种方法的好处并不是仅限于把多个事件处理器缩减为一个。你想想，举个例子，你需要动态的往这个链接表里追加更多的链接。

使用事件委托后，你就不需要做其它修改了；否则的话，你需要重新循环这个链接表，重新给每个链接安装事件处理器。