# JS事件机制

# 事件流(捕获,冒泡)

事件流:指从页面中接收事件的顺序,有冒泡流和捕获流。

冒泡和捕获则描述了两种不同的顺序

img

假如我们点击一个div, 实际上是先点击document,然后点击事件传递到div,而且并不会在这个div就停下,div有子元素就还会向下传递,最后又会冒泡传递回document,如上图

# DOM0级事件处理程序

基于DOM0的事件,对于同一个dom节点而言,只能注册一个,后边注册的 同种事件 会覆盖之前注册的

event.onclick = function(){}

# DOM2级事件处理程序

DOM2支持同一dom元素注册多个同种事件,事件发生的顺序按照添加的顺序依次触发(IE是相反的) DOM2事件通过addEventListener和removeEventListener管理

addEventListener(eventName,handlers,boolean);removeEventListener(),两个方法都一样接收三个参数,第一个是要处理的事件名,第二个是事件处理程序,第三个值为 false 时表示在事件冒泡阶段调用事件处理程序,一般建议在冒泡阶段使用,特殊情况才在捕获阶段,true 时表示在事件捕获阶段调用事件处理程序。


# Event 方法

  • event.stopPropagation(阻止当前事件在 DOM 的进一步冒泡行为)
  • event.preventDefault (取消事件的默认动作)