当前位置：首页 > news >正文

e.target与e.currentTarget的区别

news 来源：原创 2024/5/3 17:11:12

起初是在微信小程序的项目中发现了这样一段代码:

<label data-url="../logs/logs" bindtap="debug">调试按钮</label>

debug: function(e) {
    console.log(e);
    let url = e.target.dataset.url;
    wx.navigateTo({
      url: url,
    });
  },

然后打开调试器看到e对象的结构发现此时target和currentTarget是一样的，如下图所示：
在这里插入图片描述
所以引发了一个思考，两者什么时候会不一样呢？它们之间又有什么区别与联系？
在上网查阅了一番后我写了一个demo带大家来感受一下~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .A{
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
        .B{
            width: 50px;
            height: 50px;
            border: 1px solid blue;
        }
        
    </style>
</head>
<body>
    <div id="A" class="A">我是A
        <div id="B" class="B">我是B</div>
    </div>


    <script>
         var a = document.getElementById('A'),
            b = document.getElementById('B');
        function handler (e) {
            console.log(e.target);
            console.log(e.currentTarget);
            //因为绑定监听事件的是a对象，故this始终指向a
            console.log(this);
        }
        a.addEventListener('click', handler);   
    </script>
</body>
</html>

点击A时我们发现控制台输出结果是
在这里插入图片描述
说明此时的currentTarget和target是一样的，都指的是A；但是我们点击子元素B时控制台输出的结果是

说明此时currentTarget指的是A，target指的是B，this始终指向绑定监听事件的对象A。
假如此时监听事件（就是图中的点击事件）绑定的是B，那么此时currentTarget和this指向的就是B，点击B时target也是B，但是点击A时却没有任何反应。这是为什么呢？

首先要明确一个概念，事件的捕获或者冒泡，是DOM本身存在的一个现象，跟你加不加监听器没有关系。你加了监听器，只是为了在冒泡或者捕获的阶段，截取到这个事件。也就是说，点击b，他会冒泡到a，但是你没在a上安监听器，他当然不会有任何反应（没有处理函数嘛）。但这时，如果b里面有子元素，你点击子元素也会看到不同的target与currentTaget打印出来。

总结一下：对父元素绑定监听事件时，点击子元素控制台是能输出currentTarget和target的（此时两者不一样，currentTarget指的是父元素，target指的是子元素），但是对子元素绑定监听事件时，点击父元素是没有任何反应的。（此时currentTarget和target两者一样，指向的都是子元素）

参考原文作者链接：https://www.jianshu.com/p/77f94e5cad45
有需要的朋友们可以看一下原文~