上篇笔记提到了事件的修饰符，其中不少是与事件冒泡相关的，于是这篇来大致总结一下。

 

· 事件冒泡

当一个元素接收到事件时，会把“接收事件”这个行为传递给自己的父级，比如在<p>上发生事件，那么顺序为：p -> div -> body -> html -> document （冒泡过程）

这里要注意的是，传递的仅仅是这个事件，而不是事件所绑定的函数，如果父级没有绑定函数，那么是不会有任何效果产生的（但事件确实传递了）。

举个例子：

  <div @click="one">
    我是div1
    <div @click="two">
      我是div2
      <div @click="three">
        我是div3
        <div @click="four">
          我是div4
        </div>
      </div>
    </div>

① 点击div4区域

 ② 点击div2区域

 

③ 如果说，此时div3上没有绑定事件，那么点击div4区域时

 

 

· 事件捕获

与事件冒泡相反，事件会从最外层往最里层一级一级传递，直到最具体的元素。同样拿<p>来举例，那么它的顺序为：document -> html -> body -> div -> p （捕获过程）

举个例子：

<div @click.capture="one">
    我是div1
    <div @click.capture="two">
      我是div2
      <div @click.capture="three">
        我是div3
        <div @click.capture="four">
          我是div4
        </div>
      </div>
    </div>
  </div>

① 点击div4区域

 

 

 

 ② 点击div2区域

 ③ 如果说，此时div3上没有绑定事件，那么点击div4区域时

 

 

标签：JS,点击,事件,div4,div3,div2,冒泡
来源： https://www.cnblogs.com/emmamayday/p/15394198.html