JS target 和 currentTarget 的区别

JS target 和 currentTarget 的区别

 

1.target 和 currentTarget 区别

 
target：触发事件的元素。

currentTarget：事件绑定的元素。
 

那么什么是触发事件的元素，什么又是事件绑定的元素呢？别着急，先接着往下看
 

2.当一个标签下没有子标签时

<div id="divId">点击</div>
<script>
  document.getElementById('divId').addEventListener('click', function(e) {
    console.log('e.target.id:', e.target.id);						// divId
    console.log('e.currentTarget.id:', e.currentTarget.id); 		// divId
  })
</script>

可以看到，第 4 行和第 5 行都会输出 divId 。这个时候，这个 div 标签既是触发事件的元素，也是事件绑定的元素

说它是触发事件的元素，是因为鼠标真实点击在这个 div 标签上，从而触发事件；

而说它是事件绑定的元素，是因为 click 事件是绑定在这个 div 标签上。

 
如果在这还有些迷糊也没有关系，下面用另一种情况来做对比，理解的会更加清晰。

 

3.当一个标签下有若干子标签时

<ul id="ulId" onclick="click">
  <li id="li-小花">小花</li>
  <li id="li-小明">小明</li>
  <li id="li-小鑫">小鑫</li>
</ul>
<script>
  document.getElementById('ulId').addEventListener('click', function(e) {
    console.log('e.target.id:', e.target.id);										
    console.log('e.currentTarget.id:', e.currentTarget.id); 
  })
</script>

可以看到：

点击小花时，会打印出来
第 8 行 e.target.id：li-小花 ；
第 9 行 e.currentTarget.id：ulId

点击小明时，会打印出来
第 8 行 e.target.id：li-小明 ；
第 9 行 e.currentTarget.id：ulId

点击小鑫时，会打印出来
第 8 行 e.target.id：li-小鑫 ；
第 9 行 e.currentTarget.id：ulId

 
此时，这个 li 标签是触发事件的元素， ul 是事件绑定的元素
 

说 li 是触发事件的元素，是因为鼠标真实点击的是 li 标签，然后向上冒泡找到 ul 标签上的事件后进行触发

说 ul 是事件绑定的元素，是因为是因为 click 事件是绑定在这个 ul 标签上。

看到这应该就能区别它们啦