javascript事件委托理解，jQuery on 方法一步到位实现事件委托

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

               

本篇文章借鉴自：博客园文章，只为自己巩固下事件委托方面的知识

概述:

什么叫事件委托？他还有一个名字叫做事件代理，（时间代理 === 事件委托，现在才知道这两个是一个意思）

高程3上讲：事件委托即是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

借鉴其他大牛的一个例子，也为自己更好的理解一下：收快递例子

有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。前台MM收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就是即使公司里来了新员工（不管多少），前台MM也会在收到寄给新员工的快递后核实并代为签收。

两层意思：

1.现在委托前台的同事是可以签收的，即程序中的现有的dom节点是有事件的；

2.新员工也是可以被前台mm代为签收的，即程序中新添加的dom节点也是有事件的；

为什么要用事件委托？？？事件委托有什么好处？？？

一般来说，dom是需要有事件处理程序的，我们会直接给他事件处理程序就好了，那么如果是很多dom元素需要添加事件处理呢？？？

比如 100个li，每个li 都有相同的click点击事件，可能我们会有for循环的方法，来遍历所有li，然后为每个li添加绑定事件。

这么做毫无疑问的是对性能有很大的影响；

在js中，添加到页面上的事件处理程序的多少将直接关系到页面运行的整体性能，因为需要不断的与dom节点进行交互，访问dom次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间。

这就是性能优化，减少dom操作的原因；

如果采用事件委托，就会将所有的操作放到js程序里面，与dom的操作就只交互一次，这样减少了dom交互次数，性能就会提升；

事件委托原理：

事件委托就是利用事件冒泡原理实现的！

事件冒泡：就是事件从最深节点开始，然后逐步向上传播事件；

例：页面上有一个节点树，div > ul  > li  >  a

比如给最里面的a 加一个click 事件，那么事件就会一层一层的往外执行，执行顺序 a > li > ul > div,  有这样一个机制，当我们给最外层的div 添加点击事件，那么里面的ul ， li  ， a  做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托他们父集代为执行事件；

业务需求：实现功能，点击td ,单元格变色；

html结构

[html]  view plain  copy

1. <!-- 事件绑定 -->  
2.     <table id="myTable" border="1">  
3.         <tr>  
4.             <td>1</td>  
5.             <td>2</td>  
6.             <td>3</td>  
7.         </tr>  
8.     </table>  

[javascript]  view plain  copy

1. window.onload = function(){  
2.     var oTa = document.getElementById("myTable");  
3.     var aTd = oTa.getElementsByTagName('td');  
4.     for(var i=0;i<aTd.length;i++){  
5.         aTd[i].onclick = function(){  
6.             aTd[i].style.background = 'red';  
7.         }  
8.     }  
9. }  

上面的办法是最简单的办法，也是最笨的办法，我们看看执行了多少次dom操作，首先找到table 然后遍历td ，当点击td的时候，又要找一次目标的li的位置，才能执行最后的操作，每次点击都要找一次td

那我们用 事件委托的方式怎么来写呢，？？

[javascript]  view plain  copy

1. window.onload = function(){  
2.     var oTa= document.getElementById("myTable");  
3.     oTa.onclick = function(){         //点击 table、td均可以alert(123)  
4.        alert(123);    
5.     }}  

[javascript]  view plain  copy

1. <pre></pre>  
2. <pre></pre>  

这里用父集做事件处理，当td被点击时，由于冒泡原理事件就会冒泡到table上，因此table上有点击事件，所以事件就会被触发;

当然单当点击table本身的时候也是会触发的；

如果我们只想让td触发而不想让table触发，怎么办呢？？？

Event对象提供了一个属性叫做 target，可以返回事件的目标节点，我们称之为事件源，也就是说，target就可以表示 当前事件操作的dom，但可能不是真正操作的dom，

存在兼容性问题：标准浏览器：event.target，IE浏览器：event.srcElement，

此时只是获取了当前节点的位置，但并不知道节点名称，这里我们用 nodeName来获取具体是什么标签名，这个返回值是一个大写的，判断时需要转换为小写；

[javascript]  view plain  copy

1. window.onload = function(){  
2. 　　var oTa = document.getElementById("myTable");  
3. 　　oTa.onclick = function(e){  
4. 　　　　var e = e || window.event;                    //处理兼容性  
5. 　　　　var target = e.target || e.srcElement;　　　  
6. 　　　　target.nodeName.toLowerCase() == 'td' ? alert('我点中了table') ：(target.style.background = 'red');  //三元运算符进行判断  
7. 　　}  
8. }  

这样改一下，就只有td会触发事件啦，且每次只执行一次dom操作，如果td很多的话，将大大减小dom的操作；

上面的例子是说td点击都是产生同样的效果，要是每个td被点击的效果都不一样，那么事件委托还有用吗，？？？

[javascript]  view plain  copy

1. <!-- 事件绑定 -->  
2.     <table id="myTable" border="1">  
3.         <tr>  
4.             <td id="add">增加</td>  
5.             <td id="delete">删除</td>  
6.             <td id="modfiy">修改</td>  
7.             <td id="select">查找</td>  
8.         </tr>  
9.     </table>  

非事件委托写法

[javascript]  view plain  copy

1. window.onload = function(){  
2.             var Add = document.getElementById("add");  
3.             var Delete = document.getElementById("delete");  
4.             var Move = document.getElementById("move");  
5.             var Select = document.getElementById("select");  
6.               
7.             Add.onclick = function(){  
8.                 alert('添加');  
9.             };  
10.             Remove.onclick = function(){  
11.                 alert('删除');  
12.             };  
13.             Move.onclick = function(){  
14.                 alert('移动');  
15.             };  
16.             Select.onclick = function(){  
17.                 alert('选择');  
18.             }  
19.               
20.         }  

4个按钮，点击每一个做不同的动作，，，那么至少需要4次dom操作；

如果用事件委托，能进行优化吗？

事件委托写法

[javascript]  view plain  copy

1. window.onload = function(){  
2.             var myTable = document.getElementById("myTable");  
3.             myTable.onclick = function (ev) {     
4.                 var ev = ev || window.event;  
5.                 var target = ev.target || ev.srcElement;  
6.                 if(target.nodeName.toLocaleLowerCase() == 'table'){  
7.                     switch(target.id){  
8.                         case 'add' :  
9.                             alert('添加');  
10.                             break;  
11.                         case 'remove' :  
12.                             alert('删除');  
13.                             break;  
14.                         case 'move' :  
15.                             alert('移动');  
16.                             break;  
17.                         case 'select' :  
18.                             alert('选择');  
19.