事件处理顺序

Question

Javascript jQuery事件处理

如果将一个事件（例如'click'）绑定到父元素的一个函数，另一个处理程序函数绑定到子DOM元素，那么它们中的哪一个会被调用？ 如果它们都会被调用，那么它们的调用顺序是什么？

- Andrew

Answer 1

事件会沿 DOM 树“向上”冒泡，所以如果您对一个元素及其父元素都有处理程序，则子元素处理程序将首先被调用。

如果在单个 DOM 元素上注册了多个事件处理程序（例如，在单个按钮上注册了多个“click”处理程序），则处理程序的调用顺序与它们附加到元素的顺序相同。

您的处理程序可以执行一些操作来更改它们完成后发生的事情:

- 使用传入的事件参数，调用 event.preventDefault() 以防止发生任何“本地”操作。 - 调用 event.stopPropagation() 以防止事件冒泡到 DOM 树。 - 从处理程序返回 false，既停止传播又防止默认行为。

请注意，对于某些输入元素（复选框、单选按钮），处理方式有点奇怪。当调用处理程序时，浏览器将已经将复选框的“checked”值设置为其前值的相反值。也就是说，如果您有一个未选中的复选框，则“单击”处理程序将在调用后注意到“checked”属性将被设置为“true”（用户单击后）。但是，如果处理程序返回 false，则单击不会更改复选框的值，并且它将保持未选中状态。因此，就像浏览器在调用处理程序之前执行了“本地”操作的一半（切换元素的“checked”属性），但只有在处理程序不返回 false（或在事件对象上调用“preventDefault()”）时，才会真正更新元素。

- Pointy

---

将被称为父处理程序还是不会？ - Andrew

除非子处理程序阻止，否则将调用父处理程序-请参见我的（编辑后的）答案。 - Pointy

Answer 2

先调用子元素，然后再调用父元素。

事件从子元素冒泡到父元素。在同一元素上，处理程序将按绑定顺序执行。

- Nick Craver