事件处理订单

And*_*rew 3 javascript jquery javascript-events event-bubbling

javascript jquery事件处理如果在事件上(例如'click')为父元素绑定了一个函数,为子DOM元素绑定了另一个处理函数,它们中的哪一个被调用?如果他们所有人都会按照哪个顺序打电话?谢谢!

Poi*_*nty 5

事件冒泡"向上"DOM树,因此如果您有一个元素及其父元素的处理程序,则首先调用子元素处理程序.

如果为单个DOM元素上的事件注册多个处理程序(例如,单个按钮的多个"单击"处理程序),则按照它们附加到元素的顺序调用处理程序.

您的处理程序可以做一些事情来改变它们完成后发生的事情:

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

请注意,对于某些输入元素(复选框,单选按钮),处理有点奇怪.当您的处理程序被调用时,浏览器已经将复选框"已检查"设置为与其以前值相反的值.也就是说,如果你有一个未选中的复选框,那么"click"处理程序会注意到"checked"属性在被调用时(在用户点击之后)将被设置为"true".但是,如果处理程序返回false,则实际上不会通过单击更改复选框值,并且它将保持未选中状态.所以它就像浏览器在调用处理程序之前执行了一半"本机"操作(切换元素"checked"属性),但是如果处理程序没有返回false(或调用"preventDefault()"),那么它只会真正更新元素事件对象).