e.target與e.currentTarget的區別
原文摘自：https://www.jianshu.com/p/1dd668ccc97a
不必記什麽時候e.currentTarget和e.target相等，什麽時候不等，理解兩者的究竟指向的是誰即可。
e.target指向觸發事件監聽的對象。e.currentTarget指向添加監聽事件的對象。
MDN中對target的解釋為，一個觸發事件的對象的引用， 當事件處理程序在事件的冒泡或捕獲階段被調用時。
而對於currentTarget，它指的是當事件遍歷DOM時，標識事件的當前目標。它總是引用事件處理程序附加到的元素，而不是event.target，它標識事件發生的元素。
舉個例子來說明。
事件冒泡階段
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<ul>
<li>hello 1</li>
<li>hello 2</li>
<li>hello 3</li>
<li>hello 4</li>
</ul>
<script>
let ul = document.querySelectorAll(‘ul‘)[0]
let aLi = document.querySelectorAll(‘li‘)
ul.addEventListener(‘click‘,function(e){
let oLi1 = e.target
let oLi2 = e.currentTarget
console.log(oLi1) // 被點擊的li
console.log(oLi2) // ul
console.og(oLi1===oLi2) // false
})
</script>
</body>
</html>
我們知道，e.target可以用來實現事件委托，該原理是通過事件冒泡（或者事件捕獲）給父元素添加事件監聽，e.target指向引發觸發事件的元素，如上述的例子中，e.target指向用戶點擊的li，由於事件冒泡，li的點擊事件冒泡到了ul上，通過給ul添加監聽事件而達到了給每一個li添加監聽事件的效果，而e.currentTarget指向的是給綁定事件監聽的那個對象，即ul，從這裏可以發現，e.currentTarget===this返回true，而e.target===this返回false。e.currenttarget和e.target是不相等的。
註意，在jQuery提供的on方法中，e.currentTarget與該方法接收的第二個參數有關，根據jQuery的文檔描述
如果省略selector或者是null，那麽事件處理程序被稱為直接事件 或者 直接綁定事件 。每次選中的元素觸發事件時，就會執行處理程序，不管它直接綁定在元素上，還是從後代（內部）元素冒泡到該元素的
當提供selector參數時，事件處理程序是指為委派事件（事件委托或事件代理）。事件不會在直接綁定的元素上觸發，但當selector參數選擇器匹配到後代（內部元素）的時候，事件處理函數才會被觸發。jQuery 會從 event target 開始向上層元素(例如，由最內層元素到最外層元素)開始冒泡，並且在傳播路徑上所有綁定了相同事件的元素若滿足匹配的選擇器，那麽這些元素上的事件也會被觸發。
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
li{
padding: 5px;
border: 1px solid red;
}
span{
border: 1px solid #000;
}
</style>
</head>
<body>
<ul>
<li><span>hello 1</span></li>
<li><span>hello 1</span></li>
<li><span>hello 1</span></li>
<li><span>hello 1</span></li>
</ul>
<script>
let ul = document.querySelectorAll(‘ul‘)[0]
let aLi = document.querySelectorAll(‘li‘)
$(‘ul‘).on(‘click‘,‘li‘,function(e){
console.log(e.target) // 被點擊的元素
console.log(e.currentTarget) // li
console.log(e.currentTarget === this) // true
})
</script>
</body>
</html>
當li中含有子元素的時候，e.target指的是觸發事件的元素，可能是span也可能是li，此時的e.currentTarget指的是selector那個參數，也就是本例中的li。如果省略selector參數，那麽它和addEventListener中e.target和e.currentTarget是一致的。
作者：plainnany
鏈接：https://www.jianshu.com/p/1dd668ccc97a
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯系作者獲得授權並註明出處。
e.target與e.currentTarget的區別