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>
相关推荐
军训猫猫头7 分钟前
1.如何对多个控件进行高效的绑定 C#例子 WPF例子
开发语言·算法·c#·.net
爱分享的程序员12 分钟前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘17 分钟前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出19 分钟前
万字长文带你了解微前端架构
前端·微服务·前端框架
你这个年龄怎么睡得着的19 分钟前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
真的想上岸啊21 分钟前
学习C++、QT---18(C++ 记事本项目的stylesheet)
开发语言·c++·学习
Java水解22 分钟前
前端常用单位em/px/rem/vh/vm到底有什么区别?
前端
CAD老兵25 分钟前
Vite 如何借助 esbuild 实现极速 Dev Server 体验,并支持无 source map 的源码调试
前端
南屿im26 分钟前
JavaScript 手写实现防抖与节流:优化高频事件处理的利器
前端·javascript
Spider_Man26 分钟前
从零开始构建React天气应用:API集成与UI设计全指南 🌤️
前端·react.js