事件相关-CSDN博客

本文链接：https://blog.csdn.net/weixin_45615650/article/details/115029249

事件的冒泡：

**
定义：
指的是事件向上传导，后代的响应事件被触发时，其祖先的相同事件也同样被触发
大多数的事件冒泡都是好的，但是也有例外，在我们不想要事件冒泡时，我们可以取消冒泡

语法：
我们需要对事件对象进行取消冒泡，所以我们需要定义事件对象
我们将事件对象属性cancelBubble的值设置为true，就可以取消事件冒泡
event.cancelBubble = true

事件的委派：

**
定义：
事件的委派也叫事件代理，简单理解就是：原本是某个元素需要绑定的事件，现在将这个事件交给别的元素去做，正常我们把它交给父级元素，比如：原本是给li绑定点击事件，现在交给它父级ul绑定，利用冒泡原理，点击li的时候会触发ul的事件；

事件的委派实际上也是由冒泡实现的，为祖先元素绑定触发事件，相同事件的子元素也会触发
target 这个事件对象的属性主要功能为获取触发当前事件的元素

事件的绑定：

**
我们在用正常的方法：对象名.事件 = funcrion(){} 时，我们只能对一个元素的一个事件绑定函数，我们在书写时存在局限。
我们引入了addEventListener（）方法，这个属性可以对同一元素的同一事件绑定不同的相应函数，语法：
对象名.addEventListener（事件字符串（不带on），响应函数，布尔值（大多数为false））但是这个方法不支持IE8及一下的浏览器，存在兼容性，其中的参数布尔值为true时，事件在捕获阶段就触发事件（事件倒着触发），我们一般不用。

所以我们引入attachEvent()方法，这个方法只支持IE5~10浏览器，语法：
对象名.attachEvent （事件字符串（这个带on），响应函数)

所以我们为了兼容各个浏览器，我们需要自己进行书写相应的函数，用来兼容不同的浏览器，在书写函数过程中复习了一下函数名.call（对象名）方法，作用是用来修改函数的this。

自定义兼容函数：

function   bind(obj,事件，函数) {
if(obj.addEv	entListener) {
//大部分浏览器的兼容方式
obj.addEventListener(事件（不带on），函数，false)
}else {
//IE8及以下浏览器
obj.attachEvent("on" + 事件，function() {
函数.call(obj);//改变this的指向
})
}
}