初学事件委托

刚开始接触到事件委托这个概念，还是看javascritp高级程序设计接触到的（js学习必备的书有木有）。

知道了什么是事件冒泡机制，（事件捕获因为不常用就不说了），然后明白了为什么会有事件委托的产生，其实在学习html的时候，就应该明白一个网页不只是平面的，更是立体的，一个页面实际的空间比我们眼睛看到的还要多的多，就像隐藏在海平面下的冰山一样。

如果明白了网页是立体的就好理解为什么有事件冒泡这个东西了。当你鼠标点击或者划过的时候，并不只是点击了最上面的一层，在这个点击的地方重叠的所有元素其实都被点击了。那我们怎么区分点击的是哪个呢，哪个该对点击这个事件响应呢，所以就有了冒泡这个东西，我每次都从最底层向上跑，都跑一遍，匹配到哪一个哪一个元素就响应。

在这个过程中通过event.target来判断，

假设有一个这样的结构：

1 <ul id="list">
2     <li>111</li>
3     <li>222</li>
4     <li>333</li>
5     <li>444</li>
6 </ul>

你可以通过

var target=event.target;
target.nodeName.toLowerCase() == 'li'

来判断你想要触发的元素，比如这里，你想当鼠标对 li 执行了点击或者划过事件做某些事情时，可以这样判断。

或者换个写法：

先给每一个 li 添加一个id 的属性。然后这样：

 1 switch(target.id){
 2         case 0:{
 3             // do something
 4             break;
 5         }
 6         case 1:{
 7             // do something
 8             break;
 9         }
10         // ...
11     }

当点击到对应 id 的 li 的时候就会响应对应的事件了。

那么，要怎么实现事件委托呢，先来上代码，页面结构还是上面的结构：

 1 var list=document.getElementById("list");
 2         var items=list.getElementsByTagName("li");
 3         for(var i=0,len=items.length;i<len;i++){
 4             items[i].id=i;
 5         }
 6         list.addEventListener('click',clickItem,false);
 7         function clickItem(event){
 8             var event=event||window.event;
 9             var target=event.target||window.srcElement;
10             if(target.nodeName.toLowerCase() == 'li'){
11                 console.log(target.innerHTML);
12             }
13         }

是不是比较简单呢，但是事件委托却有一个很大的作用，就是提高页面的性能，同时降低与页面的耦合。

当你要给多个（好多个）元素绑定同一个事件时，就可以使用事件委托了，省却了给每一个元素绑定的麻烦，还能提高性能，何乐而不为呢。

还有个好处就是，当你的页面结构发生变化时，你也不用辛辛苦苦的变更事件的代码了，因为事件是绑定在父层元素上，变动父层元素内的页面结构不会影响事件的发生，因为事件流最终都会传递到父层元素的。