1. 事件流
现代浏览器的事件流分为两个流程:
1). 事件捕获阶段: document -> body -> div -> …… -> 事件目标
2). 事件冒泡阶段: 事件目标 -> …… -> body -> document
注意:当处于事件目标是会触发目标注册的其它事件。
2. EventTarget.addEventListener
关于 addEventListener 详细请参考 W3C 标准 MDN addEventListener
3. 实例
a. 基本示例
先看图片:
,为 div1 和 div2 分别添加点击事件(捕获和冒泡),然后点击 div2 观察结果:
// 获取节点
var div1Elem = document.getElementById("div1"),
div2Elem = document.getElementById("div2");
/* 为节点添加事件 */
// 为 div1 节点添加点击事件
div1Elem.addEventListener('click', function(event) {
console.log('div1 捕获事件');
}, true); // 捕获事件
div1Elem.addEventListener('click', function(event) {
console.log('div1 冒泡事件');
}, false); // 捕获事件
// 为 div2 节点添加点击事件
div2Elem.addEventListener('click', function(event) {
console.log('div2 捕获事件');
}, true); // 捕获事件
div2Elem.addEventListener('click', function(event) {
console.log('div2 冒泡事件');
}, false); // 捕获事件
点击 div2,观察控制台:
可以看到事件的执行流程是:事件捕获阶段(div1 -> div2)、事件冒泡阶段(div2 -> div1)。