简单几句话彻底理解Javascript中target与currentTarget的区别

Javascript中target与currentTarget的区别是老生常谈的问题。尤其是作为面试题可以考察应聘者对于JS事件的理解。

JS中的事件触发是一个过程，即
$$捕获阶段\to 目标阶段\to 冒泡阶段$$
DOM是嵌套的，触发内部元素的之前会先在捕获阶段触发外部元素，之后在冒泡阶段再次触发外部元素。

故当外部元素的事件被触发，当前的元素就对应了currentTarget，而最终目标元素就是target。

current意思就是当前的，结合事件是一个过程去理解，就知道必然有当前的&目标的两个状态。

举个例子

<div id="waiceng"><button id="neiceng">我是内层按钮</button>
</div>
<script>var waiceng = document.getElementById('waiceng');var neiceng = document.getElementById('neiceng');neiceng.addEventListener('click', function(e){// 输出true，因为当前的元素就是目标元素console.log(e.target === e.currentTarget)}, false)waiceng.addEventListener('click', function(e) {// 输出neiceng，因为目标元素是内层，外层只是在内层被触发的过程中被触发的console.log(`触发了外层的事件，target为：${e.target.id}`)。// 输出waiceng，因为这个外层元素绑定的事件被触发的时候，当前元素是waicengconsole.log(`触发了外层的事件，currentTarget为：${e.currentTarget.id}`)}, false);  
</script>

输出如下：

最后试图用一个简单的例子做一个总结：

事件触发就像足球射门，比如足球打到后卫的身上，然后弹到球网内。显然这是一个过程。target目标一定是球网，但当打到后卫身上的时候，后卫无辜的说“我觉得你的目标（currentTarget）是我。虽然你最终的目标是球网（target）。”