【博学谷学习记录】超强总结,用心分享前端|事件2

目录

事件流

事件捕获

事件冒泡

阻止冒泡

解绑事件

两种注册事件的区别

传统on注册(L0)

事件监听注册(L2)


事件流

事件流和两个阶段说明

事件流指的是事件完整执行过程中的流动路径

说明:假设页面中有个div,当触发事件时,会经历两个阶段,分别是捕获阶段、冒泡阶段

简单来说:捕获阶段是“从父到子”,冒泡阶段是“从子到父”

事件捕获

概念:从DOM的根元素开始去执行对应的事件(从外到里)

事件捕获需要写对应的代码才能看到效果

语法:对象.addEventListener(事件类型,事件处理函数,是否使用捕获机制)

addEventListener第三个参数传入true代表是捕获阶段触发

若传入false代表冒泡阶段触发,默认就是false

若使用L0事件监听,则只有冒泡阶段,没有捕获

事件冒泡

概念:当一个元素的事件被触发时,同样的事件将会在该元素的所有祖先元素中依次被触发,这个过程称为事件冒泡

简单来说就是当一个元素触发事件后,会依次向上调用所有父级元素的同名事件

事件冒泡是默认存在的

L2事件监听第三个参数是false,或者默认都是冒泡

阻止冒泡

因为默认就有冒泡模式的存在,所以容易导致事件影响到父级元素,若想把事件就限制在当前元素内,就需要阻止事件冒泡

阻止事件冒泡前提就需要拿到事件对象

语法:事件对象.stopPropagation()

此方法可以阻断事件流动传播,不光在冒泡阶段有效,捕获阶段也有效

解绑事件

on事件,直接使用null覆盖就可以实现事件的解绑

例如:事件对象.onlick = function(){

alert(‘点击了’)

}

事件对象.onclick = null 解绑事件

addEventListener方式,必须使用removeEvent Listener(事件类型,事件处理函数,是否使用捕获机制)

匿名函数无法被解绑

两种注册事件的区别

传统on注册(L0)

同一个对象,后面注册的事件会覆盖前面注册的同一事件

直接使用null覆盖就可以实现事件的解绑

都是冒泡阶段执行的

事件监听注册(L2)

语法:对象.addEvent Listener(事件类型,事件处理函数,是否使用捕获机制)

后面注册的事件不会覆盖前面注册的同一事件

可以通过第三个参数去确定是在冒泡阶段或者捕获阶段执行

解绑事件必须使用对象.removeEvent Listener(事件类型,事件处理函数,是否使用捕获机制)

匿名函数无法被解绑

事件委托

事件委托是利用事件流的特征解决一些开发需求的知识技巧

优点:减少注册次数,可以提高程序性能

原理:事件委托其实是利用事件冒泡的特点

给父元素注册事件,当我们触发子元素的时候,会冒泡到父元素身上,从而触发父元素的事件

语法:事件对象.target.tagName可以获得真正触发事件的元素

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值