dom事件的三个阶段

DOM事件的三个阶段

事件发生后，会在DOM树上传播，DOM事件流分为三阶段：捕获，目标，冒泡
如下图：

事件的发生：三个阶段

捕获：由外 向内，记录各级元素上绑定的相同事件 IE8中无此阶段

目标触发： 首先触发目标元素上的事件处理函数

冒泡：按照捕获顺序的反向，有内到外，依次触发各级父元素绑定的事件处理函数

在事件处理中目标阶段被看做冒泡阶段的一部分

如果有多个相同类型事件的事件监听函数绑定到同一个元素，当该类型的事件触发时，它们会按照被添加的顺序执行。

EventTarget.addEventListener()

target.addEventListener(type, listener[, useCapture]);

该方法的三个参数：

type :事件名称，大小写敏感。
listener：监听函数。事件发生时，会调用该监听函数。
useCapture：布尔值，表示监听函数是否在捕获阶段触发，默认为false（监听函数只在冒泡阶段被触发）。该参数可选。

例如：

var i = document.querySelector("#i");
var j = document.querySelector("#j");
var k = document.querySelector("#k");

//分别给i、j、k添加两个click事件的监听函数（false只在冒泡阶段触发，true在捕获阶段触发）
i.addEventListener("click", function (e) {
    console.log("click  i  false phase:" + e.eventPhase);
});

i.addEventListener("click", function (e) {
    console.log("click  i  true phase:" + e.eventPhase);
}, true);

j.addEventListener("click", function (e) {
    console.log("click  j  false phase:" + e.eventPhase);
});

j.addEventListener("click", function (e) {
    console.log("click  j  true phase:" + e.eventPhase);
}, true);

k.addEventListener("click", function (e) {
    console.log("click  k  false phase:" + e.eventPhase);
});

k.addEventListener("click", function (e) {
    console.log("click  k  true phase:" + e.eventPhase);
}, true);

点击k结果输出：

捕获阶段输出：

click i true phase:1
click j true phase:1

事件沿DOM树向下传播，k 的祖先document->html->i->j

目标阶段：

click k false phase:2
click k true phase:2

监听函数被调用的顺序按照其注册的顺序，无关第三个参数的值

冒泡阶段：

click b false phase:3
click a false phase:3

事件沿DOM树向上传播。