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.targe和e.currentTarget是不相等的。
注意：在jq提供的on方法中，e.currentTarget与该方法接收的第二个参数有关，根据jq的文档描述
如果省略
selector或者是null，那么事件处理程序被称为直接事件或者直接绑定事件。每次选中的元素触发事件时，就会执行处理程序，不管它直接绑定在元素上，还是从后代（内部）元素冒泡到该元素的。
当提供了selector参数是，事件处理程序是指委派事件（事件委托或事件代理）。事件不会在直接绑定的元素上触发。jq会从 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指的是触发事件的元素，可能是spsn也可能是li，此时的e.tcurrentTarget指的是selector那个参数，也就是本例中的li。如果省略selector参数，那么它和addEventListener中的e.target和e.currentTarget是一致的。
事件目标阶段
在DOM事件流中分为几个不同的阶段，如图所示：
1620777-dafb1778461af7d9.png
上述例子中是事件冒泡阶段，
e.currentTarget和e.target是不相等的，但是在事件的目标阶段，e.currentTarget和e.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')
for(let i=0;i<aLi.length;i++){
aLi[i].addEventListener('click',function(e){
let oLi1 = e.target
let oLi2 = e.currentTarget
console.log(oLi1) // li
console.log(oLi2) // li
console.og(oLi1===oLi2) // true
})
}
</script>
</body>
</html>
在本例中，事件的目标阶段li，由于e.currentTarget始终指向添加监听事件的那个对象，即aLi[i]，也就是HTML中的li，而e.target指向触发事件监听的那个对象，也是li，因此e.target和e.currentTarget相等，同时也和this相等。
总结
-
e.target指向触发事件监听的对象。 -
e.currentTarget指向添加监听事件的对象。
网友评论