我已阅读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>
3 回答
慕容708150
TA贡献1831条经验 获得超4个赞
可以在两种情况下激活事件：在开始（“捕获”）和结束（“气泡”）。事件按照其定义的顺序执行。假设您定义了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）
慕容森
TA贡献1853条经验 获得超18个赞
捕获事件（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>
添加回答
举报
0/150
提交
取消