DOM事件中target和currentTarget的區別
-
target是事件觸發的真實元素 -
currentTarget是事件綁定的元素 -
事件處理函數中的
this指向是中為currentTarget -
currentTarget和target，有時候是同一個元素，有時候不是同一個元素 （因為事件冒泡）- 當事件是子元素觸發時，
currentTarget為綁定事件的元素，target為子元素 - 當事件是元素自身觸發時，
currentTarget和target為同一個元素。
- 當事件是子元素觸發時，
<body>
<ul id="box">
<Li id="apple">蘋果</Li>
<li>香蕉</li>
<li>桃子</li>
</ul>
</body>
<script type="text/javascript">
var box = document.getElementById('box');
var apple = document.getElementById('apple');
//直接綁定在目標元素apple上
apple.onclick = function (e){
console.log(e.target); //<li id="apple">蘋果</li>
console.log(e.currentTarget); //<li id="apple">蘋果</li>
console.log(this); //<li id="apple">蘋果</li>
console.log(e.target === e.currentTarget); //true
console.log(e.target === this); //true
}
//綁定在父元素box上（如果點擊apple這個li時）
box.onclick = function (e){
console.log(e.target); // <li id="apple">蘋果</li>
console.log(e.currentTarget); //<ul id="box">...</ul>
console.log(this); //<ul id="box">...</ul>
console.log(e.currentTarget===this); //true
console.log(e.target === e.currentTarget); //false
console.log(e.target === this); //false
}
</script>