在小程序中,e.target與e.currentTarget是非常重要的,尤其是涉及到頁面?zhèn)髦禃r
currentTarget和target都是組件的一些屬性值集合,由“data-屬性名”定義的一些屬性值
currentTarget:事件觸發(fā)的當前事件(當前事件,可能是觸發(fā)事件的源組件,可能是觸發(fā)的事件組件(即觸發(fā)事件源組件的子元素),此時點擊子元素還是父元素,都是當前事件,應用e.currentTarget
target:觸發(fā)事件的源組件(事件注冊/綁定所在組件)
舉個例子:
編輯
然后點擊父元素中的子元素時:
parentClick事件中的currentTarget和target打印出來,如下:
parentClick:function(e){
console.log("點擊父元素")
console.log("target",e.target)//target:{child:"子元素"}
console.log("currentTarget",e.currentTarget)//target:{parent:"父元素"}
}
因為綁定在父元素上的parentClick事件,是由子元素觸發(fā)的,所以target的值就是子元素所包含的一些屬性值集合;currentTarget則是綁定事件的該組件(父元素)的屬性值集合。
給子元素綁定一個事件:childClick,打印出來的currentTarget和target就是一樣的。
編輯
然后點擊子元素事件:
childClick:function(e){
console.log("點擊父元素")
console.log("target",e.target)//target:{child:"子元素"}
console.log("currentTarget",e.currentTarget)//target:{child:"子元素"}
}
擴展
結合this來看:
this === e.currentTarget 總是為true
this === e.target 有可能不是true
文章來源:田珊珊個人博客
來源地址:http://www.tianshan277.com/824.html
申請創(chuàng)業(yè)報道,分享創(chuàng)業(yè)好點子。點擊此處,共同探討創(chuàng)業(yè)新機遇!