dom事件的三个阶段 |
您所在的位置：网站首页 › js中事件流分为 › dom事件的三个阶段 |
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结果输出： 事件沿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树向上传播。 |
捕获阶段输出：【本文地址】