js 事件 一

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)。