event.currentTarget与event.target的区别

最新推荐文章于 2025-04-07 14:22:12 发布

转载最新推荐文章于 2025-04-07 14:22:12 发布 · 142 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/OQKuDOtsbYT2/blog/193652

文章标签：

#javascript #ViewUI

本文通过一个具体的HTML示例介绍了在JavaScript中使用事件监听器时，event.target与event.currentTarget的区别。通过点击不同层级的元素，展示了这两个属性分别指向事件触发的实际元素与绑定事件的元素。

event.currentTarget指向事件所绑定的元素，而event.target始终指向事件发生的元素。

HTML代码:

<div id="wrapper"> 
    <a href="#" id="inner">click here!</a> 
</div>

javascript代码：

<script type="text/javascript" src="source/jquery.js"></script> 
<script> 
    $('#wrapper').click(function(e) { 
        console.log('#wrapper'); 
        console.log(e.currentTarget); 
        console.log(e.target); 
    }); 
    $('#inner').click(function(e) { 
        console.log('#inner'); 
        console.log(e.currentTarget); 
        console.log(e.target); 
    }); 
</script>

以上测试输出如下：

1.当点击click here!时click会向上冒泡，输出如下：
#inner
<a href="#" id="inner">click here!</a>
<a href="#" id="inner">click here!</a>
#wrapper
<div id="wrapper">…</div>
<a href="#" id="inner">click here!</a>

2.当点击click here!时click会向上冒泡，输出如下：
#wrapper
<div id="wrapper">…</div>
<div id="wrapper">…</div>

转载于:https://my.oschina.net/OQKuDOtsbYT2/blog/193652