无法理解addEventListener中的useCapture属性 [英] Unable to understand useCapture attribute in addEventListener
问题描述
我已阅读 https://developer.mozilla.org/en/DOM中的文章/element.addEventListener ，但无法理解 useCapture 属性。定义有：
I have read article at https://developer.mozilla.org/en/DOM/element.addEventListener but unable to understand useCapture attribute. Definition there is:
如果为true，则useCapture表示用户希望启动捕获。在启动捕获之后，指定类型的所有事件将被分派到已注册的侦听器，然后再将其发送到DOM树中的任何EventTargets。通过树向上冒泡的事件不会触发指定使用捕获的侦听器。
If true, useCapture indicates that the user wishes to initiate capture. After initiating capture, all events of the specified type will be dispatched to the registered listener before being dispatched to any EventTargets beneath it in the DOM tree. Events which are bubbling upward through the tree will not trigger a listener designated to use capture.
在这个代码中，父事件在孩子之前触发，所以我无法理解它的
behavior.Document对象具有用途true和child div的用法设置为false，并且文档的使用被跟随。因此，为什么文档属性优先于小孩。
In this code parent event triggers before child,so I am not able to understand its behavior.Document object has usecapture true and child div has usecapture set false and document usecapture is followed.So why document property is preferred over child.
function load() {
document.addEventListener("click", function() {
alert("parent event");
}, true);
document.getElementById("div1").addEventListener("click", function() {
alert("child event");
}, false);
}
<body onload="load()">
<div id="div1">click me</div>
</body>
b
推荐答案
可以在两个场合激活事件：开始（捕获）和结束（bubble）。
事件按照它们的定义顺序执行。说，你定义4个事件监听器：
Events can be activated at two occasions: At the beginning ("capture"), and at the end ("bubble"). Events are executed in the order of how they're defined. Say, you define 4 event listeners:
window.addEventListener("click", function(){alert(1)}, false);
window.addEventListener("click", function(){alert(2)}, true);
window.addEventListener("click", function(){alert(3)}, false);
window.addEventListener("click", function(){alert(4)}, true);
警报框将按以下顺序弹出：
The alert boxes will pop up in this order:
- 2（定义第一，使用
capture = true） - 4（定义第二个使用
capture = true） - 1（第一个定义的事件与
capture = false） - 3（第二个定义的事件与
capture = false）
- 2 (defined first, using
capture=true) - 4 (defined second using
capture=true) - 1 (first defined event with
capture=false) - 3 (second defined event with
capture=false)
这篇关于无法理解addEventListener中的useCapture属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
