Question

我最近发现使用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无法处理捕获）。

Answer 1

quirksmode简化了模型。事实上事件通过up to three phases: capturing, at target, and bubbling。

如果你这样记录event.eventPhase：

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

...你会在AT_TARGET阶段看到'冒泡'和'捕获'听众。在注册顺序中调用在同一阶段为同一元素调用的事件侦听器。

使用addEventListener冒泡和捕获

1 个答案: