js之事件冒泡

1.什么是事件冒泡

• DOM事件流（event flow ）存在三个阶段：

  • 事件捕获阶段
  • 处于目标阶段
  • 事件冒泡阶段

• 事件捕获

  • 通俗的理解就是，当鼠标点击或者触发dom事件时，浏览器会从根节点开始由外到内进行事件传播，即点击了子元素，如果父元素通过事件捕获方式注册了对应的事件的话，会先触发父元素绑定的事件。

• 事件冒泡

  • 与事件捕获恰恰相反，事件冒泡顺序是由内到外进行事件传播，直到根节点。
  • dom标准事件流的触发的先后顺序为：先捕获再冒泡，即当触发dom事件时，会先进行事件捕获，捕获到事件源之后通过事件传播进行事件冒泡。

例如：

点击box2结果如下：

因为box2在box1里面，所以点击box2时，也同时点击了box1，这就是事件冒泡

2.如何终止事件冒泡

• 方法一：在相应的函数中加上event.stopPropagation() 这是阻止事件的冒泡方法，不让事件向documen上蔓延。

修改之后：

点击box2结果如下：

• 方法二：判断event.target 和 event.currentTarget是否相等
  • event.target：指真正触发事件的元素
  • event.currentTarget：指绑定了事件监听的元素（触发事件元素的父级元素）
  • 这时判断两者相等，则执行相应的处理函数；当事件冒泡到上一级时，event.currentTarget变成 了上一级元素，这时候判断二者不相等，则就不作响应处理逻辑。

修改之后：

点击box2结果如下：