那么，e.target和e.currentTarget有什么区别呢？

时间：2023-03-28 19:35:31 HTML

前言大家好。我是林三鑫。用最通俗易懂的语言讲述最难的知识点是我的座右铭。基础是进阶的前提。e.target和e.currentTarget这两个对象经常用到，但是很多人根本不知道两者的区别~~~Bubble&capture当你触发一个元素的事件时，这个事件从祖先传下来这个元素的元素，这个过程就是捕获，到达这个元素之后，向上传播到它的祖先元素，这个过程就是冒泡哈哈哈哈哈

addEventListeneraddEventListener是一个为元素绑定事件的方法，他接收三个参数：第一个参数：绑定的事件名称第二个参数：执行的函数第三个参数：false：默认，表示冒泡时绑定；true：表示捕获时绑定target¤tTarget；false：我们给四个div元素绑定事件，addEventListener的第三个参数没有设置，默认设置为falseconsta=document.getElementById('a')constb=document.getElementById('b')constc=document.getElementById('c')constd=document.getElementById('d')a.addEventListener('click',(e)=>{const{target,currentTarget}=econsole.log(`targetis${target.id}`)console.log(`currentTargetis${currentTarget.id}`)})b.addEventListener('click',(e)=>{const{target,currentTarget}=econsole.log(`targetis${target.id}`)console.log(`currentTargetis${currentTarget.id}`)})c.addEventListener('click',(e)=>{const{target,currentTarget}=econsole.log(`targetis${target.id}`)console.log(`currentTargetis${currentTarget.id}`)})d.addEventListener('click',(e)=>{const{target,currentTarget}=econsole.log(`targetis${target.id}`)console.log(`currentTargetis${currentTarget.id}`)})现在我们点击查看输出，可以看到trigger是d，执行的元素顺序是冒泡targetisdcurrentTargetisdtargetisdcurrentTargetisctargetisdcurrentTargetisbtarget是dcurrentTarget为true，我们将四个事件的第三个参数设置为true，我们看输出结果，可以看到trigger是d，执行的元素是捕获target的顺序是dcurrentTarget是atarget是dcurrentTarget是btarget，是d，currentTarget是ctarget，是d，currentTarget是d，区别可以概括如下：e.target：触发事件的元素e.currentTarget：绑定事件的元素结语我是林三鑫，一个狂热的前端菜鸟程序员。如果你有上进心，喜欢前端，想学前端，那我们可以交个朋友，一起钓鱼哈哈，摸摸鱼群，加我，请注意[思想]

上一篇：前端面试资料整理【javascript篇】

下一篇：YUS框架的uc颜色控制命令

那么，e.target和e.currentTarget有什么区别呢？相关文章