target和currentTarget的概念:
1其监、target和currentTarget都是事件對象中的屬性
2、target是指獲取事件的目標蚓聘。
3壳鹤、currentTarget是指其事件處理程序當前正在處理事件的那個元素
this和currentTarget的關系:
在事件處理程序內部,對象this始終等于currentTarget的值斩启。
什么情況下target和currentTarget會相等序调?什么時候不相等呢?
- 相等的時候
當事件處理程序直接綁定在目標元素上兔簇,此時e.target===e.currentTarget发绢,e.target ===this
- 不相等的時候
當事件處理程序綁定在目標元素的父節(jié)點上時,currentTarget會指向綁定的父元素垄琐,而target依舊指向目標元素apple
<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
}
//綁定在apple的父元素box上
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>