7

我最近发现了使用 javascript 对 DOM 事件进行冒泡和捕获之间的区别。现在我明白它应该如何工作了，但我发现了一个奇怪的情况，我想知道为什么会这样。

根据Quirks mode，事件传播从在外部 div 上捕获开始，到达底部，然后冒泡到顶部。问题是当我开始做一些测试时。

在第一个上，一切都按预期工作：

<div id="out">
    <div id="in">
        Click This!!
    </div>
</div>
<script type="text/javascript">
    document.getElementById('out').addEventListener('click', function(){
        alert('capture out');
    }, true);
    document.getElementById('in').addEventListener('click', function(){
        alert('capture in');
    }, true);
    document.getElementById('out').addEventListener('click', function(){
        alert('bubble out');
    }, false);
    document.getElementById('in').addEventListener('click', function(){
        alert('bubble in');
    }, false);
</script>

如果单击文本，警报会“捕获”、“捕获”、“冒泡”和“冒泡”。问题是使用以下代码：

<div id="out">
    <div id="in">
        Click This!!
    </div>
</div>
<script type="text/javascript">
    document.getElementById('out').addEventListener('click', function(){
        alert('bubble out');
    }, false);
    document.getElementById('in').addEventListener('click', function(){
        alert('bubble in');
    }, false);
    document.getElementById('out').addEventListener('click', function(){
        alert('capture out');
    }, true);
    document.getElementById('in').addEventListener('click', function(){
        alert('capture in');
    }, true);
</script>

在这种情况下，警报会“捕获”、“冒泡”、“捕获”和“冒泡”。如果您注意到，唯一的区别是在第二个中首先分配冒泡，但我认为这不会有任何区别。

我已经用 Firefox 和 Chrome 尝试过，结果是一样的（我知道 Internet Explorer 不处理捕获）。

4

1 回答 1

10

quirksmode 稍微简化了模型。事实上，事件最多经历三个阶段：捕获、到达目标和冒泡。

如果您像这样记录event.eventPhase：

document.getElementById('out').addEventListener('click', function(e){
    console.log(e.eventPhase + " : " + e.target.id + " : bubbling");
}, false);

...您会看到在 AT_TARGET 阶段触发了“bubble in”和“capture in”侦听器。在同一阶段为同一元素调用的事件侦听器按注册顺序调用。

于 2012-01-29T17:34:38.883 回答