JS事件冒泡和事件捕获

时间:2021-10-11
本文章向大家介绍JS事件冒泡和事件捕获,主要包括JS事件冒泡和事件捕获使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

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

· 事件冒泡

当一个元素接收到事件时,会把“接收事件”这个行为传递给自己的父级,比如在<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区域时

原文地址:https://www.cnblogs.com/emmamayday/p/15394198.html