一、概述
浏览器事件流存在三个阶段:捕获阶段、目标阶段、冒泡阶段,捕获和冒泡是事件传播的两种截然相反的方式。
二、什么是捕获和冒泡
见以下例子:
<div class="parent">
<div class="child"></div>
</div>
此结构中,点击子元素:
捕获机制中,事件从document一直向点击的元素传播,直到被点击元素。
冒泡机制中,事件从被点击元素逐层向其父元素传播,直到根节点。
简单的说,捕获机制由外向内传播,冒泡机制由内向外传播。
三、事件绑定
传统绑定方法:onclick,使用的是冒泡机制,并且一个事件只能绑定一个函数(如需执行多个函数,可在外层函数内定义多个函数)
非IE中用addEventListener(eventName,callback,isCapturing)绑定事件,IE8以下不支持此方法,最后的isCapturing参数true表示采用捕获机制,false表示采用冒泡机制,不写第三个参数默认为false,即默认采用冒泡机制,可以为一个事件绑定多个响应函数。
由于IE8以下不支持addEventListener,事件绑定采用IE自有的attachEvent(eventName,callback),可以看到此函数无第三参数,无法指定事件处理机制,默认使用捕获机制处理。值得注意的是,自IE11起已不支持此方法,应当使用W3C标准规定的addEventListener方法。
1.基础回顾-浏览器事件机制
2.JavaScript 详说事件机制之冒泡、捕获、传播、委托
3.javascript事件机制详解