<article style="box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 4px 0px; background-color: rgb(255, 255, 255); padding: 20px 0px; color: rgb(0, 0, 0); font-family: "PingFang SC", "Microsoft YaHei", SimHei, Arial, SimSun; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
什么是事件
事件是視圖層到邏輯層的通訊方式碉京。 事件可以將用戶的行為反饋到邏輯層進(jìn)行處理。
事件可以綁定在組件上，當(dāng)達(dá)到觸發(fā)事件坛猪，就會(huì)執(zhí)行邏輯層中對應(yīng)的事件處理函數(shù)。
事件對象可以攜帶額外信息皂股，如 id, dataset, touches墅茉。
看圖，因?yàn)樾枰獋鬟f的數(shù)據(jù)比較多呜呐，所以我們通過dataset攜帶參數(shù)信息就斤。如果只有一個(gè)參數(shù)，可以通過id來傳遞蘑辑。
詳解（以常見的tap點(diǎn)擊事情為例）
wxml
<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>
JS
Page({
tapName: function(event) {
console.log(event)
}
})
event 打印結(jié)果
{
"type":"tap",
"timeStamp":895,
/////////////////////////////////
"target": {
"id": "tapTest",
"dataset": {
"hi":"WeChat"
}
},
"currentTarget": {
"id": "tapTest",
"dataset": {
"hi":"WeChat"
}
},
///////////////////////////////
"detail": {
"x":53,
"y":14
},
"touches":[{
"identifier":0,
"pageX":53,
"pageY":14,
"clientX":53,
"clientY":14
}],
"changedTouches":[{
"identifier":0,
"pageX":53,
"pageY":14,
"clientX":53,
"clientY":14
}]
}
注意兩點(diǎn)：
1洋机、data-名稱 不能有大寫字母，如果需要洋魂，可以通過 - （中劃線）來連接單詞槐秧，編譯的時(shí)候小程序會(huì)將第二個(gè)單詞首字母自動(dòng)大寫。圖中代碼是為了自己標(biāo)志忧设，所以第二個(gè)單詞的首字母大寫了刁标，其實(shí)可以不用。data-* 屬性中不可以存放對象址晕。
2膀懈、注意打印結(jié)果中target和currentTarget的區(qū)別。
target 觸發(fā)事件的源組件谨垃。
currentTarget 事件綁定的當(dāng)前組件启搂。
如果你在父容器上綁定了事件并傳參硼控，當(dāng)你點(diǎn)擊父容器時(shí)，事件綁定的組件和觸發(fā)事件的源組件是同一個(gè)元素胳赌，所以currentTarget 牢撼、target 都可以拿到參數(shù)，但是當(dāng)你點(diǎn)擊子元素時(shí)疑苫，target 就不是事件綁定的組件了熏版，所以拿不到參數(shù)。
由于事件冒泡的機(jī)制捍掺，父容器上綁定的事件依然可以觸發(fā)撼短，所以currentTarget 依然可以拿到參數(shù)。
說明
id傳參和dataset類似挺勿，只是最后獲取值的時(shí)候不同曲横。event.currentTarget.id
</article>
版權(quán)聲明：本文為博主原創(chuàng)文章，歡迎轉(zhuǎn)載和發(fā)表評論不瓶，轉(zhuǎn)載請注明出處禾嫉。 http://blog.csdn.net/u013778905/article/details/59129272
