JavaScript捕获和冒泡

最新推荐文章于 2022-04-23 19:49:39 发布

废柴前端

最新推荐文章于 2022-04-23 19:49:39 发布

阅读量262

点赞数 1

分类专栏： js事件 JavaScript基础文章标签： js事件事件的冒泡与捕获

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/zhuxiandan/article/details/76915034

版权

JavaScript基础同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

js事件

1 篇文章 0 订阅

订阅专栏

先看一个单击事件案例：

 <style>
      .nav{
         width:200px;
         height:200px;
         background: skyblue;
         cursor: pointer;
      }
      p{ cursor: pointer; }
   </style>
   <script>
      window.οnlοad=function () {
          var nav=document.getElementsByClassName('nav')[0];
          var p1=document.getElementById('p1');
          p1.addEventListener('click',function () {
              alert('段落被单击了！')
          });
          nav.addEventListener('click',function () {
              alert('div被单击了！')
          })
      }
   </script>
</head>
<body>
<div class="nav">
   <p id="p1">捕获和冒泡的演示</p>
</div>
</body>

在这个例子中，如果单击文字，先提示‘段落被单击了！’，然后再提示“div被单击了！”。那是因为div是段落的父容器，所以单击段落也就单击了div，所以点击段落会触发两个事件。

但是如何去规定两个事件的处理顺序呢？这就是需要用到时间的捕获和冒泡。

冒泡：按照从内到外的顺序依次触发，这是默认的方式。

捕获：与冒泡相反。

标注：之前说的JavaScript事件中onmouseenter和onmouseover非常的相似，但是她们的唯一区别就是onmouseenter不支持事件的冒泡。