微信小程序事件對(duì)象中e.target和e.currentTarget的區(qū)別詳解
在小程序的事件回調(diào)觸發(fā)時(shí)，會(huì)接收一個(gè)事件對(duì)象，事件對(duì)象的參數(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對(duì)應(yīng)的是觸發(fā)事件的源頭組件，這個(gè)組件有可能是子組件，有可能是父組件，主要是看執(zhí)行動(dòng)作的區(qū)域。而currentTarget始終對(duì)應(yīng)事件所綁定的組件。
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了JS對(duì)象創(chuàng)建的幾種方式，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
JS控制文本框textarea輸入字?jǐn)?shù)限制的方法
JS控制文本框textarea輸入字?jǐn)?shù)限制的方法，需要的朋友可以參考一下2013-06-06
本篇文章小編為大家介紹，用顯卡加速，輕松把筆記本打造成取暖器的辦法！需要的朋友可以參考一下2013-04-04
FireFox的getYear的注意事項(xiàng)...2007-04-04
uniapp微信小程序獲取當(dāng)前定位城市信息的實(shí)例代碼
因?yàn)閡niapp官網(wǎng)文檔的定位功能,只能提供經(jīng)緯度,如果要獲取當(dāng)前具體的位置信息,必須要調(diào)取官方的地圖方法,然后在地圖上選點(diǎn),下面這篇文章主要給大家介紹了關(guān)于uniapp微信小程序獲取當(dāng)前定位城市信息的相關(guān)資料,需要的朋友可以參考下2022-08-08
JavaScript將對(duì)象數(shù)組按字母順序排序的方法詳解
這篇文章主要介紹了JavaScript如何將對(duì)象數(shù)組按字母順序排序，本文介紹了三種解決方案，if條件語句 + sort()，localeCompare() + sort()，Collator() + sort()，有感興趣的同學(xué)可以跟著小編一起來看看2023-07-07
這篇文章主要介紹了JS加載器如何動(dòng)態(tài)加載外部js文件的相關(guān)資料,需要的朋友可以參考下2016-05-05
JavaScript中內(nèi)置函數(shù)Map()的使用
Map()是JavaScript中內(nèi)置的一種數(shù)據(jù)結(jié)構(gòu)，它允許您將鍵值對(duì)映射到任意類型的值，主要介紹了JavaScript中內(nèi)置函數(shù)Map()的使用，感興趣的可以了解一下2023-05-05
JavaScript事件Event對(duì)象詳解(屬性、方法、自定義事件)
Event對(duì)象代表事件的狀態(tài),比如事件在其中發(fā)生的元素、鍵盤按鍵的狀態(tài)、鼠標(biāo)的位置、鼠標(biāo)按鈕的狀態(tài),這篇文章主要給大家介紹了關(guān)于JavaScript事件Event對(duì)象(屬性、方法、自定義事件)的相關(guān)資料,需要的朋友可以參考下2024-01-01
關(guān)于ckeditor在bootstrap中modal中彈框無法輸入的解決方法
今天小編就為大家分享一篇關(guān)于ckeditor在bootstrap中modal中彈框無法輸入的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09