e.target与e.currentTarget
2019-07-21 本文已影响0人
twentyshaw
通过一个例子来看e.target与e.currentTarget的区别与联系
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<div id="A">我是A
<div id="B">我是B</div>
</div>
</body>
</html>
<script>
var a = document.getElementById('A'),
b = document.getElementById('B');
function handler (e) {
console.log(e.target);
console.log(e.currentTarget);
}
a.addEventListener('click', handler);
</script>
1. 关于 a.addEventListener('click', handler)
如果写成：b.addEventListener('click', handler),就只有点击b时会在控制台打印出结果，点击a不会打印出任何东西。
image.png
这是为什么呢？
首先要明确一个概念，事件的捕获或者冒泡，是DOM本身存在的一个现象，跟你加不加监听器没有关系。你加了监听器，只是为了在冒泡或者捕获的阶段，截取到这个事件。
也就是说，点击b，他会冒泡到a，但是你没在a上安监听器，他当然不会有任何反应（没有处理函数嘛）。但这时，如果b里面有子元素，你点击子元素也会看到不同的target与currentTaget打印出来。
2. 代码测试与结果：
-
点击<div id="A">
控制台打印出了：
image.png
说明在点击a时，currentTarge与target都是 a
- 点击作为子元素的<div id="B">
控制台打印出：
image.png
说明在点击b时，target为b，但currentTarget仍为 a
3. 结论
currentTarget始终是监听事件者，即 直接调用addEventlistener那个节点
而target是事件的真正发出者， 即 触发事件的节点，在click事件中就是被点击的节点。
4. 扩展
结合this来看：
this === e.currentTarget 总是为true
this === e.target 有可能不是true
