在微信小程序中
点击inner,由于事件冒泡,middle和outer上绑定的事件也会触发。
inner是触发事件的元素,所以tapInner上的target(触发事件的元素)和currentTarget都是inner(绑定事件的元素)
tapMiddle上的target == inner(触发事件的元素),currentTarget == middle(绑定事件的元素)
tapOuter上的target == inner(触发事件的元素), currentTarget == outer(绑定事件的元素)
在原生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 为true,当触发的事件的元素是事件绑定的元素的时候target === this;