js事件冒泡

来源：互联网发布：手机版淘宝的新品上架编辑：程序博客网时间：2024/06/02 02:35

今天提个简单点的话题：事件冒泡

提到事件冒泡，那么我们就要提到事件捕获，首先，提一下，就是也许你会觉得事件冒泡是一个“行为”，然后我们去“事件捕获”，很遗憾的说一句，

事件冒泡还有事件捕获都是“行为”，只是两种有不同的顺序

假设有下面这么两个元素：

很简单，对吧，这时候，我们需要来份别添加点击事件，这时候，请注意，在动态添加点击事件的时候，有第三个参数，他的默认值是false；

分开添加点击事件之后，我们点击div，此时发现两个事件都触发了，而且是先触发div的点击事件，然后再显示出body的点击事件，不急。先试试下把false改为true，再点击div后

发现是先显示出body的点击事件，然后才是div的点击事件，这就是事件捕获，由级别相对高的父级再到低级的子级，直到我们的div。而有我们的div依次上升，则是冒泡。

（要阻止这种行为用————event1.stopPropagation()————用法百度吧）

好了。没了，希望你们明白什么事冒泡什么是捕获

代码：

<body style="width: 1000px; height: 1000px;">
       <div style="width: 100px;height: 100px; background: #000000;"></div>
   </body>
   <script>
       document.querySelector("div").addEventListener("click", function() {
           console.log("div");
       }, false);
       document.querySelector("body").addEventListener("click", function() {
           console.log("body");
       }, false);
   </script>

1 0