JS事件冒泡、事件捕获、事件委托、事件模型

p被点击》button被点击》div被点击》body被点击，即具体元素到不具体元素，从p冒泡到根节点。 阻止事件冒泡： 标准的W3C 方式：e.stopPropagation();这里的stopPropagation是标准的事件对象的一个方法，调用即可 非标准的IE方式:ev.cancelBubble=true; 这里的cancelBubble是 IE事件对象的属性，设为true就可以了 事件捕获 从不具体的元素到具体的元素，从document开始触发，一级一级往下传递，依次触发，直到真正事件目标为止。 body被点击》div被点击》buton被点击》p被点击，即跟冒泡是相反的，从不具体元素到具体元素，从根节点到p标签。 事件委托 原理：事件冒泡机制 利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。借网上别人的例子简单明了的解释： 有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。前台MM收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就是即使公司里来了新员工（不管多少），前台MM也会在收到寄给新员工的快递后核实并代为签收。 优点： 1.大量减少内存占用，减少事件注册。 2.新增元素实现动态绑定事件

• 1
• 2
• 3
• 4

实现方式： 1.可用addEventListener(); //所有主流浏览器，除了IE8及更早IE版本。 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 } }); 2.attachEvent() //IE8及IE更早版本，现在已经不怎么使用。 <1>.用法：element.attachEvent(event,function)； （1）event事件加'on'，onClick （2）没有第三个参数，因为IE只有冒泡，没有反向冒泡。 （3）执行顺序按照绑定的反序（先执行后绑定的方法）。 <2>.移除事件监听：element.detachEvent(event,function) 以上就是JS事件冒泡、捕获、委托和事件模型的相关个人理解，有错误之处还请指正。

本文章由javascript技术分享原创和收集