热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

e.target与e.currentTarget(事件委托)

 case1:addEventListernerfalse冒泡 点击father之后:        target:fathercurrentTarget:father 点击son

 

case1: addEventListerner false 冒泡

 点击father之后:                target : father currentTarget:father

 

点击son之后: target : son   currentTarget:father

 

 case2: addEventListerner  true 捕获

点击father之后:              target : father   currentTarget:father

 

点击son之后 :        target : son      currentTarget:son

 

 总结:target指的是被点击的DOM节点(触发点)  currentTarget指的是:实际被监听的DOM节点(绑定点)

应用场景:事件委托 : 将事件绑定在父级元素上,利用事件的冒泡,以达到只绑定一个事件而能监听所有子集元素的目的,从而大幅提升性能,减少代码冗余。

 在case1情况下 currentTarge不会改变  

获取父子孙的tagName

 

 可见,给最外层DOM节点绑定事件可以分别获取内部不同节点

参考实例:https://www.jianshu.com/p/ac47521806d2

 

RLLM->Remeber less, learn morn



推荐阅读
author-avatar
你去过的地方叫远方
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有