【微信小程序】【原生】 target和currentTarget区别

mac2024-06-30  57

event.target返回触发事件的元素event.currentTarget返回绑定事件的元素currentTarget === this 为true

 

 

在微信小程序中

 

点击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;

 

最新回复(0)