- event.targetは、イベントをトリガーした要素を返します
- event.currentTargetは、イベントにバインドされた要素を返します
- currentTarget ===この正しいtrue
WeChatアップルレットで
内側をクリックすると、イベントのバブリングにより、中央と外側にバインドされたイベントもトリガーされます。
Innerはイベントをトリガーする要素であるため、tapInnerのターゲット(イベントをトリガーする要素)とcurrentTargetは両方とも内部(イベントをバインドする要素)です。
target == inner(イベントをトリガーする要素)on tapMiddle、currentTarget == middle(イベントをバインドする要素)
tapOuterのtarget == inner(イベントをトリガーする要素)、currentTarget == outside(イベントをバインドする要素)
ネイティブjsでは、
バインディングイベントをトリガーした要素、次にtarget === currentTarget = true
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="fa" data-type='fa'>
<button id="btn" data-type='son'>点击</button>
</div>
<script>
let btn = document.getElementById('btn');
let fa = document.getElementById('fa');
// btn.addEventListener('click',function(e){
// let oLi1 = e.target
// let oLi2 = e.currentTarget
// console.log(oLi1)
// console.log(oLi2)
// console.log(oLi1===oLi2)
// })
// fa.addEventListener('click',function(e){
// let oLi1 = e.target
// let oLi2 = e.currentTarget
// console.log(oLi1)
// console.log(oLi2)
// console.log(oLi1===oLi2)
// })
btn.onclick = function(e) {
console.log(e)
let oLi1 = e.target
let oLi2 = e.currentTarget
console.log(oLi1)
console.log(oLi2)
console.log(oLi1===oLi2)
}
fa.onclick = function(e) {
console.log(e)
let oLi1 = e.target
let oLi2 = e.currentTarget
console.log(oLi1)
console.log(oLi2)
console.log(oLi1===oLi2)
}
</script>
</body>
</html>
currentTarget ===これは、トリガーされたイベントの要素がイベントターゲットにバインドされた要素である場合に当てはまります=== this;