事件委托(事件代理)

事件委托原理：事件冒泡机制

优点：

1.大量减少内存占用，减少事件注册。

2.新增元素实现动态绑定事件

实现方式：

一、可用addEventListener();    //所有主流浏览器，除了IE8及更早IE版本。

1.语法：element.addEventListener(event, function, useCapture)；

event:必须。字符串，指定事件名。 不加'on'，如click

function:必须。指定要事件触发时执行的函数。

useCapture：可选。布尔值，指定事件是否在捕获或冒泡阶段执行(true-事件句柄在捕获阶段执行；false-默认。事件句柄在冒泡阶段执行)。

2.移除事件监听：element.removeEventListener(event, function,useCapture)。移除时传入的参数与添加处理程序时使用的参数相同。这也意味着通过addEventListener()添加的匿名函数无法移除。

3.功能：可多次绑定同一个事件，并且不会覆盖上一个事件。

代码实例：给所有的li绑定点击事件，极为繁琐，这时候需要用到事件代理。

ul.addEventListener("click",function(e) { 

    if(e.target && e.target.nodeName.toLowerCase() == "li") {  // 检查事件源e.target是否为Li 

        console.log("List item ",e.target.id.replace("post-","")," was clicked!");  // 打印当前点击是第几个item 

  } 

});

二、attachEvent()     //IE8及IE更早版本

1.用法：element.attachEvent(event,function)；

（1）event事件加'on'，onClick

（2）没有第三个参数，因为IE只有冒泡，没有反向冒泡。

（3）执行顺序按照绑定的反序（先执行后绑定的方法）。

2.移除事件监听：element.detachEvent(event,function)