javaScript进阶-事件委派

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

当页面上某个元素上的事件触发时，而在 DOM 继承关系上，这个元素的所有子元素也能接收到这个事件，这时你可以使用一个在父元素上的事件处理器来处理，而不是使用一堆的各个子元素上的事件监听器来处理。

hrml代码如下

 1  <h2> 2             Great Web resources</h2> 3         <ul id="resources"> 4             <li><a href="http://www.zhihu.com">Opera Web Standards Curriculum</a></li> 5             <li><a href="http://sitepoint.com">Sitepoint</a></li> 6             <li><a href="http://alistapart.com">A List Apart</a></li> 7             <li><a href="http://yuiblog.com">YUI Blog</a></li> 8             <li><a href="http://blameitonthevoices.com">Blame it on the voices</a></li> 9             <li><a href="http://oddlyspecific.com">Oddly specific</a></li>10         </ul>复制代码
javascript代码如下

通过循环这些链接，将每个链接上附加一个事件处理器

?123456789 <SPAN style="FONT-SIZE: 14px">$(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);             } }）; </SPAN>

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

　注意这里的

    1 e.target返回的实际是一个dom对象

    2 e.preventDefault();//阻止事件的默认操作 上述例子中如果少了这一句设置，点击链接后会跳转到相应的页面

这种方法的好处并不是仅限于把多个事件处理器缩减为一个。你想想，举个例子，你需要动态的往这个链接表里追加更多的链接。使用事件委托后，你就不需要做其它修改了；否则的话，你需要重新循环这个链接表，重新给每个链接安装事件处理器。

 摘自 日耳曼战车