无法理解addEventListener中的useCapture参数
我已阅读https://developer.mozilla.org/en/DOM/element.addEventListener上的文章，但无法理解useCapture属性。定义有：
如果为true，useCapture指示用户希望启动捕获。启动捕获后，所有指定类型的事件都将分派给已注册的侦听器，然后才分派给DOM树中其下的任何EventTarget。在树中冒泡的事件不会触发指定使用捕获的侦听器。
在此代码中，parent事件在child之前触发，所以我无法理解其行为。Document对象的usecapture为true，child div的usecapture设置为false，并且遵循了useuseture的文档。因此为什么document属性优先于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>
慕桂英3389331浏览 810回答 3
3回答
-
慕容708150
可以在两种情况下激活事件：在开始（“捕获”）和结束（“气泡”）。事件按照其定义的顺序执行。假设您定义了4个事件监听器：window.addEventListener("click", function(){console.log(1)}, false);window.addEventListener("click", function(){console.log(2)}, true);window.addEventListener("click", function(){console.log(3)}, false);window.addEventListener("click", function(){console.log(4)}, true);日志消息将按以下顺序显示：2（首先使用定义capture=true）4（使用定义秒capture=true）1（带有的第一个定义的事件capture=false）3（带有的第二个已定义事件capture=false） -
慕容森
捕获事件（useCapture = true）与冒泡事件（useCapture = false）MDN参考捕获事件将在泡泡事件之前调度事件传播顺序为家长捕捉儿童捕捉目标捕获和目标泡沫按照注册顺序当元素是事件的目标时，useCapture参数无关紧要（感谢@bam和@ legend80s）儿童泡泡父母泡泡stopPropagation() 将停止流动使用捕获流演示版结果：家长捕捉儿童泡泡1儿童捕捉（因为孩子是目标，所以捕获和气泡将按照他们注册的顺序触发）儿童泡泡2父母泡泡var parent = document.getElementById('parent'), children = document.getElementById('children');children.addEventListener('click', function (e) { alert('Children Bubble 1'); // e.stopPropagation();}, false);children.addEventListener('click', function (e) { alert('Children Capture'); // e.stopPropagation();}, true);children.addEventListener('click', function (e) { alert('Children Bubble 2'); // e.stopPropagation();}, false);parent.addEventListener('click', function (e) { alert('Parent Capture'); // e.stopPropagation();}, true);parent.addEventListener('click', function (e) { alert('Parent Bubble'); // e.stopPropagation();}, false);<div id="parent"> <div id="children"> Click </div></div>
随时随地看视频慕课网APP
相关分类
JavaScript