事件相关

**

事件的冒泡:

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

语法:
我们需要对事件对象进行取消冒泡,所以我们需要定义事件对象
我们将事件对象属性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的指向
})
}
}

**

事件的捕获:

**
当addeventlistent中布尔值参数的值为true
时,事件会在捕获阶段进行触发,这个只在IE8以上浏览器才支持。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值