继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

【备战春招】第5天 前端工程师2022版

大龄前端菜鸟
关注TA
已关注
手记 42
粉丝 6
获赞 6

课程名称:事件传播
课程章节:JS函数与DOM
课程讲师: 未知
课程内容:
事件传播(重要):

真实的嵌套监听响应顺序
http://img4.mukewang.com/63e61529000188ee06180184.jpg

一般的点击事件监听 即: 某节点.onclick=function(){};  默认只监听冒泡部分 (即只有从里到外的部分)

而通过addEventListener(a,function(){},true); 便能灵活进行监听

http://img.mukewang.com/63e615ae0001b21205430747.jpg
1、盒子嵌套时事件监听的执行顺序

先从外到内,然后再从内到外

即先捕获事件,再冒泡执行事件。


onxxxx写法只能监听冒泡阶段,因为冒泡阶段是从内到外的,所以看起来是从内到外。


DOM0级事件监听:只能监听冒泡阶段(onxxxx系列监听事件)

DOM2级事件监听:addEventListener()

xxx.addEventListener('click',function(){//事件处理函数},true)

第一个参数:事件名

第二个参数:执行函数

第三个参数:bool类型,true,监听捕获阶段;false,监听冒泡阶段。


2、注意事项

嵌套盒子是按照监听顺序执行,即不管书写顺序,都是先捕获,再冒泡;

但最内部元素不再区分捕获和冒泡阶段,事件执行顺序按照书写顺序。

如果给元素设置相同的同名事件,DOM0级写法最后的会覆盖之前的,而DOM2级的会按书写顺序执行

(即addEventListener()可以给同一个元素添加多个相同的事件,例如一个按钮可以有多个click事件)


3、removeEventListener() 方法会删除已通过 addEventListener() 方法附加的事件处理程序

http://img3.mukewang.com/63e615dd0001a77206870717.jpg

课程总结:

    今天忙着测试,临下班赶紧拿过来复习一下,冒泡感觉还是挺难懂的,回去再看看,找点小练习做一下,以前学的全都忘完了



打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP