1. 程式人生 > 程式設計 >微信小程式中target和currentTarget的區別小結

微信小程式中target和currentTarget的區別小結

前言

在小程式中,e.target與e.currentTarget是非常重要的,尤其是涉及到頁面傳值時

currentTarget和target都是元件的一些屬性值集合,由“data-屬性名”定義的一些屬性值

currentTarget:事件觸發的當前事件(當前事件,可能是觸發事件的源元件,可能是觸發的事件元件(即觸發事件源元件的子元素),此時點選子元素還是父元素,都是當前事件,應用e.currentTarget
target:觸發事件的源元件(事件註冊/繫結所在元件)

舉個例子:

<view bindtap="parentClick" data-parent="父元素">
<view data-child="子元素">編輯</view> 
 </view>

然後點選父元素中的子元素時:

parentClick事件中的currentTarget和target打印出來,如下:

parentClick:function(e){
console.log("點選父元素")
console.log("target",e.target)//target:{child:"子元素"}
console.log("currentTarget",e.currentTarget)//target:{parent:"父元素"}
}

因為繫結在父元素上的parentClick事件,是由子元素觸發的,所以target的值就是子元素所包含的一些屬性值集合;currentTarget則是繫結事件的該元件(父元素)的屬性值集合。

給子元素繫結一個事件:childClick,打印出來的currentTarget和target就是一樣的。

<view bindtap="parentClick" data-parent="父元素">
<view bindtap="childClick" data-child="子元素">編輯</view> 
 </view>

然後點選子元素事件:

childClick:function(e){
console.log("點選父元素")
console.log("target",e.currentTarget)//target:{child:"子元素"}
}

擴充套件

結合this來看:

  • this === e.currentTarget 總是為true
  • this === e.target 有可能不是true

到此這篇關於微信小程式中target和currentTarget區別的文章就介紹到這了,更多相關微信小程式target和currentTarget區別內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!