使用addEventListener冒泡和捕获

Question

我最近发现了使用javascript在Bubbling和捕获DOM事件之间的区别.现在我明白它应该如何工作,但我发现了一个奇怪的情况,我想知道为什么会发生这种情况.

根据Quirks模式,事件传播开始于捕获外部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简化了模型.事实上事件最多经历三个阶段:捕获,目标和冒泡.

如果你像这样记录event.eventPhase:

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

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