传统的事件处理中，需要为每个元素添加事件处理器。js事件代理则是一种简单有效的技巧，通过它可以把事件处理器添加到一个父级元素上，从而避免把事件处理器添加到多个子级元素上。

1、事件代理

事件代理的原理用到的就是事件冒泡和目标元素，把事件处理器添加到父元素，等待子元素事件冒泡，并且父元素能够通过target（IE为srcElement）判断是哪个子元素，从而做相应处理。

传统事件处理，为每个元素添加事件处理器，代码如下：

事件代理的处理方式，代码如下：

addEventListener（"click",function(){},false）

第三个参数可选。布尔值，指定事件是否在捕获或冒泡阶段执行。

可能值:

• • true - 事件句柄在捕获阶段执行
  • false- 默认。事件句柄在冒泡阶段执行

     
 
      
red
 
      
orange
 
      
yellow
 
      
green
 
      
blue
 
      
indigo
 
      
purple
 
     
  

2、事件代理的好处

 总结一下事件代理的好处：

• 将多个事件处理器减少到一个，因为事件处理器要驻留内存，这样就提高了性能。想象如果有一个100行的表格，对比传统的为每个单元格绑定事件处理器的方式和事件代理（即table上添加一个事件处理器），不难得出结论，事件代理确实避免了一些潜在的风险，提高了性能。
• DOM更新无需重新绑定事件处理器，因为事件代理对不同子元素可采用不同处理方法。如果新增其他子元素（a,span,div等），直接修改事件代理的事件处理函数即可，不需要重新绑定处理器，不需要再次循环遍历。

3、事件代理的问题：【update20170502】

代码如下：事件代理同时绑定了li和span，当点击span的时候，li和span都会冒泡。

li中的span的内容
 

解决办法：

方法一：span的事件处理程序中阻止冒泡

$(document).on('click', 'span', function(e){        alert('li span');        e.stopPropagation();    })

方法二：li的事件处理程序中检测target元素

$(document).on('click', 'li', function (e) {        if (e.target.nodeName == 'SPAN') {            e.stopPropagation();            return; } alert('li li'); });

4、事件代理的一个有趣应用

点击一个列表时，输出对应的索引

5、

     
                        
      
1
                        
      
2
                        
      
3
                        
      
                        
      
                        
      
                        
      
                    
     

$(".sevenBao").on("click",function(e){            var ev = e || window.event;            var target = ev.target || ev.srcElement;             ev.stopPropagation();             $(target).css("background","#f3f3f3")        })