事件委托原理:事件冒泡机制
优点:
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)