使用 addEventListener 进行冒泡和捕获

Posted

技术标签:

【中文标题】使用 addEventListener 进行冒泡和捕获【英文标题】:Bubbling and capturing with addEventListener 【发布时间】:2012-02-21 02:54:17 【问题描述】:

我最近发现了使用 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 不处理捕获)。

【问题讨论】:

感谢这个中肯的问题。让我的想法清楚地捕捉和冒泡。 【参考方案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 阶段触发了“bubble in”和“capture in”侦听器。在同一阶段为同一元素调用的事件侦听器按注册顺序调用。

【讨论】:

我明白了,这很有道理。感谢您的回答。 @Nickolay,非常感谢。您的解释使我正确理解了这个问题。

以上是关于使用 addEventListener 进行冒泡和捕获的主要内容,如果未能解决你的问题,请参考以下文章

addEventListener 事件监听器 冒泡事件)

addEventListener和attachEvent主要有几个区别

如何使用addEventListener添加事件

JS事件冒泡停止冒泡addEventListener--实例演示

第十一章-js事件

事件冒泡和事件捕获