Js事件冒泡和事件捕获

事件捕获(event capturing): 当鼠标点击或者触发dom事件时(被触发dom事件的这个元素被叫作事件源),浏览器会从根节点 =>事件源(由外到内)进行事件传播。

事件冒泡(dubbed bubbling): 事件源 =>根节点(由内到外)进行事件传播。

事件冒泡

冒泡 中,内部元素的事件会先被触发,然后再触发外部元素,即:

html 复制代码
 <p> 元素的点击事件先触发,然后会触发<div>  元素的点击事件。false

事件捕获

捕获 中,外部元素的事件会先被触发,然后才会触发内部元素的事件,即:

html 复制代码
 <p>元素的点击事件先触发 ,然后再触发<div>元素的点击事件。true

无论是事件捕获还是事件冒泡,它们都有一个共同的行为,就是事件传播。

dom标准事件流的触发的先后顺序为:先捕获再冒泡。即当触发dom事件时,会先进行事件捕获,捕获到事件源之后通过事件传播进行事件冒泡。

html 复制代码
<!--
//冒泡事件解释
 /*
 *点击标签<p>你好</p>
 *  先弹出内容 --p你好
 *    再弹出内容 --div你好
 */
-->
     <head>
     <style>
          .id {
            height: 100px;
            width: 100px;
            background-color: aquamarine;
          }
          p{
            height: 20px;
            width: 20px;
            background-color: red;                        
          }
    </style>
  </head>
  <body>
        <div id="id" class="id" onclick="alert('div你好')">
          <p onclick="alert('p你好')">你好</p>
        </div>
   </body>

阻止事件默认行为

如果不想这样的默认操作发生,可以使用 event.stopPropagation(); 方法来阻止

event.stopPropagation();

html 复制代码
<head>
  <style>
    .id {
      height: 100px;
      width: 100px;
      background-color: aquamarine;
    }
    p {
      height: 20px;
      width: 20px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="id" class="id" onclick="alert('div你好'); event.stopPropagation();">
    <p onclick="alert('p你好'); event.stopPropagation();">你好</p>
  </div>
</body>
相关推荐
10年前端老司机3 小时前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
Sylvia-girl5 小时前
Java——抽象类
java·开发语言
Yana.nice7 小时前
Bash函数详解
开发语言·chrome·bash
阿芯爱编程8 小时前
2025前端面试题
前端·面试
前端小趴菜059 小时前
React - createPortal
前端·vue.js·react.js
tomorrow.hello9 小时前
Java并发测试工具
java·开发语言·测试工具
晓13139 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
老胖闲聊9 小时前
Python I/O 库【输入输出】全面详解
开发语言·python
菜包eo9 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴10 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript