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>
相关推荐
CodeCraft Studio1 小时前
PDF处理控件Aspose.PDF教程:使用 Python 将 PDF 转换为 Base64
开发语言·python·pdf·base64·aspose·aspose.pdf
零点零一1 小时前
VS+QT的编程开发工作:关于QT VS tools的使用 qt的官方帮助
开发语言·qt
2501_915918412 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂3 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技3 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip3 小时前
JavaScript二叉树相关概念
前端
lingchen19063 小时前
MATLAB的数值计算(三)曲线拟合与插值
开发语言·matlab
gb42152874 小时前
java中将租户ID包装为JSQLParser的StringValue表达式对象,JSQLParser指的是?
java·开发语言·python
一朵梨花压海棠go4 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
蒋星熠4 小时前
Flutter跨平台工程实践与原理透视:从渲染引擎到高质产物
开发语言·python·算法·flutter·设计模式·性能优化·硬件工程