微信小程序事件對象中e.target和e.currentTarget的區(qū)別詳解
在小程序的事件回調(diào)觸發(fā)時(shí),會接收一個(gè)事件對象,事件對象的參數(shù)中包含一個(gè)target和currentTarget屬性,接下來說說這二者的區(qū)別。
首先上代碼:
wxml部分:
<view id='tar-father' bindtap='click'> 父組件 <view id='tar-children'>子組件</view> </view>
wxss部分:
#tar-father{ width: 300rpx; height: 300rpx; background-color: skyblue; } #tar-children{ background-color: pink; }
效果圖
js部分:
click: function (event) { console.log(event.target) console.log(event.currentTarget) }
當(dāng)點(diǎn)擊圖中粉色子組件區(qū)域時(shí)的輸出結(jié)果:
event.target 為其子組件,也就是觸發(fā)該事件的源頭組件
event.currentTarget 為事件所綁定的組件
當(dāng)點(diǎn)擊圖中藍(lán)色父組件區(qū)域時(shí)的輸出結(jié)果:
event.target 為父組件,因?yàn)橛|發(fā)的源頭也就是父組件本身
event.currentTarget 始終為事件所綁定的組件
總結(jié):target對應(yīng)的是觸發(fā)事件的源頭組件,這個(gè)組件有可能是子組件,有可能是父組件,主要是看執(zhí)行動(dòng)作的區(qū)域。而currentTarget始終對應(yīng)事件所綁定的組件。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
js 動(dòng)態(tài)添加標(biāo)簽(新增一行,其實(shí)很簡單,就是幾個(gè)函數(shù)的應(yīng)用)
把所有代碼拷下另存為一個(gè)html文件,在瀏覽器中打開,點(diǎn)擊“新增一行”按鈕就可以,以下是對js函數(shù)的解釋2009-03-03微信小程序+ECharts實(shí)現(xiàn)動(dòng)態(tài)刷新的過程記錄
這篇文章主要給大家介紹了關(guān)于微信小程序+ECharts實(shí)現(xiàn)動(dòng)態(tài)刷新的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05微信小程序 簡易計(jì)算器實(shí)現(xiàn)代碼實(shí)例
這篇文章主要介紹了微信小程序 簡易計(jì)算器實(shí)現(xiàn)代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09JavaScript利用img實(shí)現(xiàn)前端頁面埋點(diǎn)功能
做數(shù)據(jù)分析的時(shí)候需要獲取足量的有效數(shù)據(jù),這個(gè)時(shí)候就需要我們在前端頁面埋點(diǎn)。如何來實(shí)現(xiàn)一個(gè)前端埋點(diǎn)功能,本文就帶你上手試試2022-06-06