WebKit 浏览器是一个由事件驱动的设计模式,只有事件不断的发送并被指定的目标接收到,程序才能执行
事件的发送自不必说,任何时刻都可以根据需求向目标结点发送事件,并在目标结点注册监听器,当接收到
事件时,触发响应操作。
针对同一个事件,可能有多个结点都注册了监听器,那到底由哪个结点的监听程序处理,又或者多个结点的
监听处理先后顺序是如何:
监听处理顺序有三种:冒泡、捕获和目标,常用的为前两种,即 addEventListener 的第三个参数 useCapture 指定。
addEventListener 有三个参数:
第一个参数表示事件名称(不含 on,如 "click");
第二个参数表示要接收事件处理的函数;
第三个参数为 useCapture,本文就讲解它。
测试代码:
<div id="outDiv">
<div id="middleDiv">
<div id="inDiv">在此点击鼠标。</div>
</div>
</div>
<div id="info"></div>
var outDiv = document.getElementById("outDiv");
var middleDiv = document.getElementById("middleDiv");
var inDiv = document.getElementById("inDiv");
var info = document.getElementById("info");
outDiv.addEventListener("click", function () { info.innerHTML += "outDiv" + "<br>"; }, false);
middleDiv.addEventListener("click", function () { info.innerHTML += "middleDiv" + "<br>"; }, false);
inDiv.addEventListener("click", function () { info.innerHTML += "inDiv" + "<br>"; }, false);
上述是我们测试的代码,根据 info 的显示来确定触发的顺序,
有三个 addEventListener,而 useCapture 可选值为 true 和 false,
•全为 false 时,触发顺序为:inDiv、middleDiv、outDiv;
•全为 true 时,触发顺序为:outDiv、middleDiv、inDiv;
•outDiv 为 true,其他为 false 时,触发顺序为:outDiv、inDiv、middleDiv;
•middleDiv 为 true,其他为 false 时,触发顺序为:middleDiv、inDiv、outDiv;
(1)如果将useCapture设置为true,则侦听器只在捕获阶段处理事件,而不在目标或冒泡阶段处理事件。
捕获阶段处理,即事件从 DOM 根结点开始遍历目标结点,碰到有注册 监听该事件的结点时,立即执行结点
的监听处理程序,处理结束,继续从该结点往下遍历,每次碰到都直接执行监听程序。
(2)如果useCapture为false,则侦听器只在目标或冒泡阶段处理事件。
冒泡阶段处理,即事件遍历DOM时,碰到有注册 监听该事件的结点时,暂时不执行监听程序,直到遍历结束找到
最后一个注册了该事件监听的结点后,开始冒泡逆向遍历DOM树,在逆向遍历过程中,碰到监听该事件的结点时,
才执行监听程序
两种监听程序的执行方案而已,触发时间点不同