e.target 和e.currentTarget的区别

最新推荐文章于 2025-05-29 14:47:16 发布

Canton_jack

最新推荐文章于 2025-05-29 14:47:16 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： JS

本文链接：https://blog.youkuaiyun.com/Canton_jack/article/details/84592970

JS 专栏收录该内容

7 篇文章

订阅专栏

本文深入解析了事件监听器中e.target与e.currentTarget的区别与应用。e.target始终指向触发事件的实际元素，而e.currentTarget则指向添加事件监听器的元素。通过实例演示了在不同情况下的具体表现，帮助读者理解事件冒泡与委托机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

e.target 指向触发事件监听的对象。
e.currentTarget 指向添加监听事件的对象，指向代码中点击事件的元素

e.target始终指向即当前点击的目标元素，e.currentTarget在事件委托中，如果监听元素不是目标元素，则指向监听元素

$('#listen').addEventListener('click',function(e){

console.info(e.target) // li

console.info(e.currentTarget)// ul

})

let aLi = document.querySelectorAll('li') 

for(let i=0;i<aLi.length;i++){

aLi[i].addEventListener('click',function(e){

console.log(e.target ) // li

console.log(e.currentTarget) // li 因为监听元素为li

console.og(oLi1===oLi2) // true

})

}

$('ul').click(function (e) {
    console.log(e.target);  //当前的li
    console.log(e.currentTarget); //元素的ul
})

// eg：

<ul id="listen">

<li>1</li>

<li>1</li>

<li>1</li>

<ul>