DOMイベントtarget
とcurrentTarget
の違い
target
これは、イベントトリガ本当の要素であり、currentTarget
イベントは、要素を結合さイベントハンドラ
this
ポイントがためのものですcurrentTarget
currentTarget
そしてtarget
、時には1と同じ要素、そして時にはなく、同じ要素(なぜならイベントバブリング)- イベントは、子要素をトリガされると、
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>