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>
相关推荐
菩提树下的凡夫5 分钟前
前端vue的开发流程
前端·javascript·vue.js
青山的青衫9 分钟前
【用homebrew配置nginx+配置前端项目与后端联调】Macbook M1(附一些homebrew操作)
运维·前端·nginx
二十雨辰12 分钟前
[作品集]-容易宝
java·开发语言·前端
亮子AI19 分钟前
【NestJS】在 nest.js 项目中,如何使用 Postgresql 来做缓存?
开发语言·缓存·node.js·nest.js
图灵信徒22 分钟前
R语言数据结构与数据处理基础内容
开发语言·数据挖掘·数据分析·r语言
Zz燕25 分钟前
G6实战_手把手实现简单流程图
javascript·vue.js
oioihoii29 分钟前
高性能推理引擎的基石:C++与硬件加速的完美融合
开发语言·c++
恋猫de小郭30 分钟前
iOS 26 开始强制 UIScene ,你的 Flutter 插件准备好迁移支持了吗?
android·前端·flutter
Asort30 分钟前
JavaScript设计模式(二十一)——策略模式:灵活算法的艺术与实战
前端·javascript·设计模式
weixin_4569042731 分钟前
基于C#的文档处理
开发语言·c#