Js事件冒泡和事件捕获

最新推荐文章于 2024-07-19 11:40:48 发布

宝子向前冲

最新推荐文章于 2024-07-19 11:40:48 发布

阅读量463

点赞数 8

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_66570642/article/details/136758639

版权

本文详细介绍了事件捕获和事件冒泡的概念，解释了DOM事件流的工作原理，即先捕获后冒泡，以及如何通过`event.stopPropagation()`阻止事件的默认行为。实例代码展示了这两种机制在实际应用中的效果。

摘要由CSDN通过智能技术生成

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

事件冒泡（dubbed bubbling）： 事件源 =>根节点（由内到外）进行事件传播。

事件冒泡

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

 <p> 元素的点击事件先触发，然后会触发<div>  元素的点击事件。false

事件捕获

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

 <p>元素的点击事件先触发 ，然后再触发<div>元素的点击事件。true

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

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

<!--
//冒泡事件解释
 /*
 *点击标签<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();

<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>

宝子向前冲

关注

8
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
Js事件冒泡和事件捕获

当鼠标点击或者触发dom事件时（被触发dom事件的这个元素被叫作事件源），浏览器会从根节点 =>事件源（由外到内）进行事件传播。事件源 =>根节点（由内到外）进行事件传播。在冒泡在捕获无论是事件捕获还是，它们都有一个共同的行为，就是事件传播。dom标准事件流的触发的先后顺序为：先捕获再冒泡。即当触发dom事件时，会先进行事件捕获，捕获到事件源之后通过事件传播进行事件冒泡。
复制链接

扫一扫