事件冒泡与捕获 | 易学教程

事件流描述的是从页面接收事件的顺序。
事件传递有两种方式：冒泡与捕获。

1.事件冒泡
IE的事件流叫做事件冒泡，即事件从最具体的元素到不具体的元素。
2.事件捕获
即从不具体的元素到具体的元素

事件冒泡和捕获的顺序
事件监听的添加和删除以及各自的注意事项
阻止事件冒泡
普通的事件绑定

   <style>
      .son{
            width: 100px;
            height: 100px;
            background: yellow;
        }
   </style>
	<div class="grandfather">3  
        <div class="son">1</div>
	</div>
    <script>
	var son = document.getElementsByClassName("son")[0];
   son.onclick = function (event) {
         console.log("1");
     }
     son.onclick = function () {
         console.log("我是son2");
     }
     </script>
`
 
   事件监听:  addEventListener()
   参数1 ： 事件类型
    参数2 ： 触发事件后执行的函数
    参数3 ： 布尔值   默认值是 false 事件冒泡  ；   true 事件捕获
 

```javascript
<style>
 	.grandfather{
            width: 500px;
            height: 500px;
            background: red;
        }  
</style>
<div class="grandfather">3  
        <div class="son">1</div>
	</div>
  <script>
  var gf = document.getElementsByClassName("grandfather")[0];
   gf.addEventListener("click",function abc(ev) {
        console.log("3");
    },false);
    gf.addEventListener("click",abv,false);
    
    function abv() { // window.abv
        console.log("4");
    }
    </script>

删除事件监听
注意事项：
1. 相同元素调用
2. 相同事件名称
3. 相同函数名(匿名函数不行,需要全局函数)
4. 相同的执行阶段

  gf.removeEventListener("click",abv,true);

普通事件绑定和事件监听的区别：
1. 普通的只能给元素相同类型的事件绑定一个，如果绑定相同的第二个，会将上一个覆盖
事件监听可以给同一个元素的相同类型事件绑定多个
2. 事件监听可以控制事件的传播方式(冒泡或捕获)
3. 事件监听可以通过删除的方法，来取消事件，而普通绑定只能通过 null来取消

来源：CSDN

作者：weixin_46174967

链接：https://blog.csdn.net/weixin_46174967/article/details/104028736

标签

阻止冒泡