前端底层-冒泡与捕获

事件冒泡

1.什么是事件冒泡

当给父子元素的同一事件绑定时 触发了子元素身上的事件 执行完毕之后 也会触发父级元素的相同事件

这种传播叫事件冒泡

2.解决冒泡

event对象有个属性叫cancelBubble 默认值是false 改成true就取消当前事件冒泡

 

 

 

事件捕获

1.事件写法：

①第一种写法：obj.onclick=function（）{ }这就相当于给obj的onclick属性赋值是一个道理
↑↑↑这种写法有一点不好 给元素绑定同一个事件的时候 后者会把前者覆盖掉
②第二种写法：
标准浏览器用：addEventListener()这个方法
addEventListener(参数1,参数2,参数3)
参数 1 是事件名 事件名不带on
参数 2 是事件函数
参数 3 布尔值 默认值是false false改成true那么冒泡模型直接变成捕获模型
③id低版本用：attachEvent()这个方法

2.捕获知识点

①ie低版本没有捕获
②普通事件绑定写法没有捕获

3.什么是事件捕获

给父子元素用addEventListener( )绑定同一个事件时 当触发子元素身上的事件 会先触发父元素身上的事件

 

六、attachEvent（）与  addEventListener（）二者的区别

1.attachEvent 只用在ie8以下 addEventListener 只用在标准浏览器
2.attachEvent 事件名带on 后者不带on
3.attachEvent 函数里的this是window 而后者函数里面的this是当前元素对象
4.attachEvent 只有冒泡没有捕获 而后者有冒泡也有捕获