我试图了解是什么决定了单击嵌套的 <div> 时触发事件处理程序的顺序- 我所看到的似乎与记录在案的行为不一致，所以我正在寻找一些帮助来理解它。
我有 2 个嵌套的 div，每个都有 2 个事件处理程序，一个用于捕获阶段，一个用于冒泡阶段:
<html>
<head>
<script>
function setup(){
var outer = document.getElementById('outer');
outer.addEventListener('click', function(){console.log('outer false');}, false);
outer.addEventListener('click', function(){console.log('outer true');}, true);
var inner = document.getElementById('inner');
inner.addEventListener('click', function(){console.log('inner false');}, false);
inner.addEventListener('click', function(){console.log('inner true');}, true);
}
</script>
<style>
div {
border: 1px solid;
padding: 1em;
}
</style>
</head>
<body onload="setup()">
<div id="outer">
<div id="inner">
CLICK
</div>
</div>
</body>
</html>
根据 what I have read输出应该是:
outer true
inner true
inner false
outer false
但我实际看到的(在 Chrome 和 Firefox 上)是:
outer true
inner false
inner true
outer false
谁能解释这个差异？
最佳答案
W3C 事件流规范(即 Chrome 和 Firefox 实现的规范)是首先捕获所有事件，直到它们到达目标元素，此时它们再次冒泡。然而，当事件流到达事件目标本身时，事件不再是捕获或冒泡——它是在目标本身上。因为冒泡/捕获不适用，所以事件处理程序按照它们注册的顺序触发。尝试交换内部元素事件处理程序的顺序，您会发现它也会更改控制台输出的顺序。
jsFiddle 示例:http://jsfiddle.net/RTfwd/1/
最近对 DOM 事件规范的修订使这一点更加清晰 (http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html):
bubbling phase The process by which an event can be handled by one of the target's ancestors after being handled by the event target. See the description of the bubble phase in the context of event flow for more details.
capture phase The process by which an event can be handled by one of the target's ancestors before being handled by the event target. See the description of the capture phase in the context of event flow for more details.
关于javascript - 为捕获阶段注册的事件监听器在冒泡之前未触发 - 为什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11841330/