Question

我理解事件冒泡以及它如何从最内层元素遍历dom。我很好奇为什么这是默认行为？

<div>1
    <div>2
        <div>3
            <div>4
                <div>5</div>
            </div>
        </div>
    </div>
</div>

如果我在每个部分都有一个事件监听器，但是单击<div>5</div>为什么事件会冒泡到div4，div3，div2（等）的事件监听器？

编辑：我不认为这是“什么是事件冒泡”的副本，因为这是在询问为什么不是什么

Answer 1

如果你问为什么这是默认行为，那么答案是因为the language specification says so（强调我的）：

事件监听器由以下字段组成：


[...]

捕获（布尔值，最初为假）

[...]

当一个事件被调度到参与树的对象（例如一个元素）时，它也可以到达该对象的祖先上的事件监听器。首先，以树的顺序调用其捕获变量设置为true的所有对象的祖先事件侦听器。其次，调用对象自己的事件侦听器。最后，仅当事件的bubbles属性值为true时，才会再次调用object的祖先事件侦听器，但现在以反向树顺序调用。

如果你问为什么规范是这样定义的，你可以问自己：
如果你点击了div5，你是否也点击过div4？这最终是一个意见问题，但对我来说答案是肯定的，根据我最初的评论：

如果你去过日内瓦，你也去过瑞士。

Answer 2

你的陈述是错误的。 The default for simple events is not to bubble：

触发名为 e 的简单事件意味着trusted事件名称 e ，不会冒泡（除非另有说明）声明）并且不可取消（除非另有说明），和必须创建使用Event接口的 dispatched在给定目标。

所以HTML相关的事件会让它冒出来，因为规范明确地这么说，大概是因为这样做更有意义。

一些冒泡的事件：

Click events：

触发click事件意味着firing a synthetic mouse event named click，其气泡且可取消。
Unfocusing steps：

fire a simple event气泡在元素上命名为change。

一些不起泡的事件：

Error events when updating image data

fire a simple event在img元素
上命名为error
Readystatechange events when changing the current document readiness

fire a simple event在Document对象上命名为readystatechange。

为什么事件会在dom上冒出来？

2 个答案: