Event delegation

关于event delegation
[size=large]背景[/size]

其实event delegation 是对javascript的事件流的一种算是基础应用吧.....

首先当然要了解javascript的事件流机制，在dom level 2的event model 里有具体解释.....这个自己看吧....[url="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow-bubbling"]这儿[/url]

其实就是Event bubbling机制：当document对象接收一个事件，然后在捕获期间找到最具体的事件影响的元素，一旦这个元素绑定这个事件，事件将以冒泡的形式返回到document对象

那么如何应用呢？

[size=large]应用[/size]

还记得addEventListener 里的最后一个参数么？一般我们都传false,这里......呵呵。

我们可以直接用通过一个附加属性来进行事件与事件句柄绑定。

如下：

场景 你需要对某一个列表中的每个元素绑定事件：

var test= {
      init: function() {
         var nav = document.getElementById('nav');
         var links = nav.getElementsByTagName('a');
         for ( var i = 0, j = links.length; i < j; ++i ) {
            if ( links[i].className == 'button' ) {
            links[i].onclick = this.onclick;
         }
      }
     },
     onclick: function() {
           this.href = this.href + '?name=value;
            return true;
      }
}

如果使用event delegation 只需父级节点进行绑定

var test= {
      init: function() {
         var nav = document.getElementById('nav');
        nav.onclick = this.onclick
      }
     },
      onclick: function(e) {
              event = e|| window.event;

              //IE uses srcElement as the target
              var target = event.target || event.srcElement;    

              if ( target.className == 'bundle' ) {
                   target.href = target.href + '?name=value';
              }
      return true;
     }
}

[size=large]好处[/size]

1.代码少了，迭代dom的代码少了，重复绑定的代码少了，比如你动态增加节点

2.内存使用少了.......