javascript - 事件处理顺序

Question

Javascript jQuery 事件处理

如果事件（例如“点击”）为父元素绑定一个函数，为子 DOM 元素绑定另一个处理函数，它们中的哪一个被调用？如果它们都将被调用，它们按什么顺序调用？

Answer 1

事件在 DOM 树中“向上冒泡”，因此如果您有一个元素及其父元素的处理程序，则将首先调用子元素处理程序。

如果您为单个 DOM 元素上的事件注册了多个处理程序（例如，单个按钮的多个“单击”处理程序），则处理程序按照它们附加到元素的顺序被调用。

你的处理程序可以做一些事情来改变他们完成后发生的事情：

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

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

Answer 2

孩子将首先被调用，然后是父母。

随着事件冒泡，事件从子级传递到父级。在同一个元素上，处理程序将按照它们被绑定的顺序执行。