深入理解target与currentTarget

最新推荐文章于 2023-07-07 22:58:47 发布

野生松

最新推荐文章于 2023-07-07 22:58:47 发布

阅读量656

点赞数 1

分类专栏：前端进阶文章标签： target与currentTarget

本文链接：https://blog.csdn.net/qq_38211541/article/details/104253935

版权

前端进阶专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一、target与currentTarget两者既有区别，也有联系

举例：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>Example</title>
 5 </head>
 6 <body>
 7     <div id="A">
 8         <div id="B">
 9         </div>
10     </div>
       <script>
            var a = document.getElementById('A'),
                b = document.getElementById('B');    
            function handler (e) {
                console.log(e.target);
                console.log(e.currentTarget);
             }
             // 当addEventListener的第三个参数为true的时候，代表是在捕获阶段绑定，当第三个参数为false或者为空的时候，代表在冒泡阶段绑定。
             a.addEventListener('click', handler, false);
            // 当点击A时：输出：输出 1 <div id="A">...<div>  2 <div id="A">...<div>
            // 当点击B时：输出：输出 1 <div id="B">...<div>  2 <div id="A">...<div>
       </script>
11 </body>
12 </html>

currentTarget指向添加监听事件的对象，而target指向触发事件监听的对象。（可能这样更好理解：currentTarget始终是监听事件者，而target是事件的真正发出者）

野生松

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
深入理解target与currentTarget

一、target与currentTarget两者既有区别，也有联系举例： 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Example</title> 5 </head> 6 <body> 7 <div id="A"> ...
复制链接

扫一扫