微信小程序事件綁定傳參冒泡及捕獲的示例詳解

第微信小程序事件綁定傳參冒泡及捕獲的示例詳解目錄常見的事件有：currentTarget和target的區(qū)別事件傳遞參數(shù)touches和changedTouches的區(qū)別事件的綁定兩種方法事件傳參事件的冒泡與事件的捕獲小結(jié)

常見的事件有：

類型觸發(fā)條件最低版本touchstart手指觸摸動(dòng)作開始touchmove手指觸摸后移動(dòng)touchcancel手指觸摸動(dòng)作被打斷，如來電提醒，彈窗touchend手指觸摸動(dòng)作結(jié)束tap手指觸摸后馬上離開longpress手指觸摸后，超過350ms再離開，如果指定了事件回調(diào)函數(shù)并觸發(fā)了這個(gè)事件，tap事件將不被觸發(fā)1.5.0longtap手指觸摸后，超過350ms再離開（推薦使用longpress事件代替）transitionend會(huì)在WXSStransition或wx.createAnimation動(dòng)畫結(jié)束后觸發(fā)animationstart會(huì)在一個(gè)WXSSanimation動(dòng)畫開始時(shí)觸發(fā)animationiteration會(huì)在一個(gè)WXSSanimation一次迭代結(jié)束時(shí)觸發(fā)animationend會(huì)在一個(gè)WXSSanimation動(dòng)畫完成時(shí)觸發(fā)touchforcechange在支持3DTouch的iPhone設(shè)備，重按時(shí)會(huì)觸發(fā)

有兩個(gè)注意點(diǎn)：

Touchcancle:在某些特定場景下才會(huì)觸發(fā)（比如來電打斷等）

tap事件和longpress事件通常只會(huì)觸發(fā)其中一個(gè)

currentTarget和target的區(qū)別

事件傳遞參數(shù)

當(dāng)視圖層發(fā)生事件時(shí)，某些情況需要事件攜帶一些參數(shù)到執(zhí)行的函數(shù)中,這個(gè)時(shí)候就可以通過

data-屬性來完成：

1格式：data-屬性的名稱

2獲?。篹.currentTarget.dataset.屬性的名稱

touches和changedTouches的區(qū)別

事件的綁定兩種方法

第一種：bind：事件名推薦方式，冒號(hào)隔開

wxml文件：

buttonbind:tap="click1"data-name="{{name}}"data-age="18"id="bt"我是按鈕/button

js文件：

Page({

*頁面的初始數(shù)據(jù)

data:{

name:"jeff"

//e為事件對(duì)象，事件所有產(chǎn)生的數(shù)據(jù)都在e中

click1:function(e){

console.log("你點(diǎn)擊了事件1"，e)

第二種：bind事件名不隔開

wxml文件:

viewbindtap="click2"我是事件2/view

js文件：

Page({

*頁面的初始數(shù)據(jù)

//e為事件對(duì)象，事件所有產(chǎn)生的數(shù)據(jù)都在e中

click2:function(e){

console.log("你點(diǎn)擊了事件2"，e)

事件傳參

關(guān)鍵字：setDate

WXML文件：

buttonbind:tap='click2'你當(dāng)前點(diǎn)擊了{(lán){num}}次/button

js文件

//pages/test/test.js

Page({

data:{

num:0,

click2:function(e){

this.setData({

num:this.data.num+1

console.log('你點(diǎn)擊了按鈕2')

事件的冒泡與事件的捕獲

capture-bind:tap="click1"#事件捕獲，執(zhí)行順序：由外-內(nèi)

bind:tap="click2"#事件冒泡，執(zhí)行順序：由內(nèi)-外

catch:阻止事件捕獲

capture-catch:tap="click3"#順序執(zhí)行到click3，不包括click3.后面不再繼續(xù)執(zhí)行，阻止了

catch阻止捕獲

小結(jié)

1響應(yīng)函數(shù)直接寫在page對(duì)象中就可以了，不需要和vue一樣寫在methods里面

2viewbind:事件名稱=響應(yīng)函數(shù)的函數(shù)名data-參數(shù)名=值

3獲取點(diǎn)擊事件傳過來的值，在事件對(duì)象