微信小程序事件綁定傳參冒泡及捕獲的示例詳解
常見的事件有:
類型 | 觸發(fā)條件 | 最低版本 |
---|---|---|
touchstart | 手指觸摸動作開始 | |
touchmove | 手指觸摸后移動 | |
touchcancel | 手指觸摸動作被打斷,如來電提醒,彈窗 | |
touchend | 手指觸摸動作結(jié)束 | |
tap | 手指觸摸后馬上離開 | |
longpress | 手指觸摸后,超過350ms再離開,如果指定了事件回調(diào)函數(shù)并觸發(fā)了這個事件,tap事件將不被觸發(fā) | 1.5.0 |
longtap | 手指觸摸后,超過350ms再離開(推薦使用longpress事件代替) | |
transitionend | 會在 WXSS transition 或 wx.createAnimation 動畫結(jié)束后觸發(fā) | |
animationstart | 會在一個 WXSS animation 動畫開始時觸發(fā) | |
animationiteration | 會在一個 WXSS animation 一次迭代結(jié)束時觸發(fā) | |
animationend | 會在一個 WXSS animation 動畫完成時觸發(fā) | |
touchforcechange | 在支持 3D Touch 的 iPhone 設(shè)備,重按時會觸發(fā) |
有兩個注意點:
Touchcancle: 在某些特定場景下才會觸發(fā)(比如來電打斷等)
tap事件和longpress事件通常只會觸發(fā)其中一個
currentTarget和target的區(qū)別
事件傳遞參數(shù)
當(dāng)視圖層發(fā)生事件時,某些情況需要事件攜帶一些參數(shù)到執(zhí)行的函數(shù)中, 這個時候就可以通過
data-屬性來完成:
1 格式:data-屬性的名稱
2 獲?。篹.currentTarget.dataset.屬性的名稱
touches和changedTouches的區(qū)別
事件的綁定兩種方法
第一種:bind:事件名 推薦方式,冒號隔開
wxml文件:
<button bind:tap="click1" data-name="{{name}}" data-age="18" id="bt">我是按鈕</button>
js文件:
Page({ /** * 頁面的初始數(shù)據(jù) */ data: { name:"jeff" }, //e為事件對象,事件所有產(chǎn)生的數(shù)據(jù)都在e中 click1:function(e){ console.log("你點擊了事件1",e) }, )}
第二種:bind事件名 不隔開
wxml文件:
<view bindtap="click2">我是事件2</view>
js文件:
Page({ /** * 頁面的初始數(shù)據(jù) */ //e為事件對象,事件所有產(chǎn)生的數(shù)據(jù)都在e中 click2:function(e){ console.log("你點擊了事件2",e) }, )}
事件傳參
關(guān)鍵字:setDate
WXML文件:
<button bind:tap='click2'>你當(dāng)前點擊了{(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('你點擊了按鈕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對象中就可以了,不需要和vue一樣寫在methods里面
2 <view bind:事件名稱 = "響應(yīng)函數(shù)的函數(shù)名" data-參數(shù)名 = "值">
3 獲取點擊事件傳過來的值,在事件對象中。例如:e.currentTarget.dataset中
以上就是微信小程序事件綁定傳參冒泡及捕獲的示例詳解的詳細(xì)內(nèi)容,更多關(guān)于微信小程序事件綁定傳參冒泡及捕獲的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
對layer彈出框中icon數(shù)字參數(shù)的說明介紹
今天小編就為大家分享一篇對layer彈出框中icon數(shù)字參數(shù)的說明介紹,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09JavaScript中的this例題實戰(zhàn)總結(jié)詳析
使用JavaScript開發(fā)的時候,很多人多多少少都會被this的指向問題搞蒙圈,下面這篇文章主要給大家介紹了關(guān)于JavaScript中this例題實戰(zhàn)的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06ES6 Generator函數(shù)的應(yīng)用實例分析
這篇文章主要介紹了ES6 Generator函數(shù)的應(yīng)用,結(jié)合實例形式分析了ES6 Generator函數(shù)異步操作與異常捕獲相關(guān)使用技巧,需要的朋友可以參考下2019-06-06TypeScript聯(lián)合類型,交叉類型和類型保護(hù)
這篇文章主要介紹了TypeScript聯(lián)合類型,交叉類型和類型保護(hù),聯(lián)合類型就是定義一些類型,定義的變量只需要滿足任意一種類型即可,交叉類型就是需要滿足所有類型,交叉類型使用,更多內(nèi)容我們來看看下面文章詳細(xì)內(nèi)容吧2021-12-12