您好,登錄后才能下訂單哦!
這篇“微信小程序怎么解綁事件”文章的知識點大部分人都不太理解,所以小編給大家總結了以下內容,內容詳細,步驟清晰,具有一定的借鑒價值,希望大家閱讀完這篇文章能有所收獲,下面我們一起來看看這篇“微信小程序怎么解綁事件”文章吧。
事件是視圖層到邏輯層的通訊方式。
事件可以將用戶的行為反饋到邏輯層進行處理。
事件可以綁定在組件上,當達到觸發事件,就會執行邏輯層中對應的事件處理函數。
事件對象可以攜帶額外信息,如id, dataset, touches。
在組件中綁定一個事件處理函數。
如bindtap
,當用戶點擊該組件的時候會在該頁面對應的Page中找到相應的事件處理函數。
<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>
在相應的Page定義中寫上相應的事件處理函數,參數是event。
Page({ tapName: function(event) {console.log(event) } })
可以看到log出來的信息大致如下
{"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,}],}
事件分為冒泡事件和非冒泡事件
冒泡事件:當一個組件上的事件被觸發后,該事件會向父節點傳遞。
非冒泡事件:當一個組件上的事件被觸發后,該事件不會向父節點傳遞。
WXML的冒泡事件列表:
類型 | 觸發條件 |
---|---|
touchstart | 手指觸摸動作開始 |
touchmove | 手指觸摸后移動 |
touchcancel | 手指觸摸動作被打斷,如來電提醒,彈窗 |
touchend | 手指觸摸動作結束 |
tap | 手指觸摸后馬上離開 |
longtap | 手指觸摸后,超過350ms再離開 |
注:除上表之外的其他組件自定義事件都是非冒泡事件,如<form/>
的submit
事件,<input/>
的input
事件,<scroll-view/>
的scroll
事件,(詳見各個組件)
事件綁定的寫法同組件的屬性,以key、value的形式。
key以bind
或catch
開頭,然后跟上事件的類型,如bindtap
, catchtouchstart
value是一個字符串,需要在對應的Page中定義同名的函數。不然當觸發事件的時候會報錯。
bind
事件綁定不會阻止冒泡事件向上冒泡,catch
事件綁定可以阻止冒泡事件向上冒泡。
如在下邊這個例子中,點擊inner view會先后觸發handleTap3
和handleTap2
(因為tap事件會冒泡到middle view,而middle view阻止了tap事件冒泡,不再向父節點傳遞),點擊middle view會觸發handleTap2
,點擊outter view會觸發handleTap1
。
<view id="outter" bindtap="handleTap1"> outer view <view id="middle" catchtap="handleTap2">middle view<view id="inner" bindtap="handleTap3"> inner view</view> </view></view>
如無特殊說明,當組件觸發事件時,邏輯層綁定該事件的處理函數會收到一個事件對象。
BaseEvent基礎事件對象屬性列表:
屬性 | 類型 | 說明 |
---|---|---|
type | String | 事件類型 |
timeStamp | Integer | 事件生成時的時間戳 |
target | Object | 觸發事件的組件的一些屬性值集合 |
currentTarget | Object | 當前組件的一些屬性值集合 |
屬性 | 類型 | 說明 |
---|---|---|
detail | Object | 額外的信息 |
TouchEvent 觸摸事件對象屬性列表(繼承 BaseEvent):
屬性 | 類型 | 說明 |
---|---|---|
touches | Array | 觸摸事件,當前停留在屏幕中的觸摸點信息的數組 |
changedTouches | Array | 觸摸事件,當前變化的觸摸點信息的數組 |
特殊事件:<canvas/>
中的觸摸事件不可冒泡,所以沒有 currentTarget。
該頁面打開到觸發事件所經過的毫秒數。
觸發事件的源組件。
屬性 | 類型 | 說明 |
---|---|---|
id | String | 事件源組件的id |
tagName | String | 當前組件的類型 |
dataset | Object |
事件源組件上由data- 開頭的自定義屬性組成的集合 |
事件綁定的當前組件。
屬性 | 類型 | 說明 |
---|---|---|
id | String | 當前組件的id |
tagName | String | 當前組件的類型 |
dataset | Object |
當前組件上由data- 開頭的自定義屬性組成的集合 |
說明: target 和 currentTarget 可以參考上例中,點擊 inner view 時,handleTap3
收到的事件對象 target 和 currentTarget 都是 inner,而 handleTap2
收到的事件對象 target 就是 inner,currentTarget 就是 middle。
在組件中可以定義數據,這些數據將會通過事件傳遞給 SERVICE。書寫方式:以data-
開頭,多個單詞由連字符-
鏈接,不能有大寫(大寫會自動轉成小寫)如data-element-type
,最終在 event.target.dataset 中會將連字符轉成駝峰elementType
。
示例:
<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>
Page({ bindViewTap:function(event){ event.target.dataset.alphaBeta === 1 // - 會轉為駝峰寫法event.target.dataset.alphabeta === 2 // 大寫會轉為小寫 } })
touches 是一個數組,每個元素為一個 Touch 對象(canvas 觸摸事件中攜帶的 touches 是 CanvasTouch 數組)。 表示當前停留在屏幕上的觸摸點。
屬性 | 類型 | 說明 |
---|---|---|
identifier | Number | 觸摸點的標識符 |
pageX, pageY | Number | 距離文檔左上角的距離,文檔的左上角為原點 ,橫向為X軸,縱向為Y軸 |
clientX, clientY | Number | 距離頁面可顯示區域(屏幕除去導航條)左上角距離,橫向為X軸,縱向為Y軸 |
屬性 | 類型 | 說明 | 特殊說明 |
---|---|---|---|
identifier | Number | 觸摸點的標識符 | |
x, y | Number | 距離 Canvas 左上角的距離,Canvas 的左上角為原點 ,橫向為X軸,縱向為Y軸 |
changedTouches 數據格式同 touches。表示有變化的觸摸點,如從無變有(touchstart),位置變化(touchmove),從有變無(touchend、touchcancel)。
自定義事件所攜帶的數據,如表單組件的提交事件會攜帶用戶的輸入,媒體的錯誤事件會攜帶錯誤信息,詳見組件定義中各個事件的定義。
點擊事件的detail
帶有的 x, y 同 pageX, pageY 代表距離文檔左上角的距離。
以上就是關于“微信小程序怎么解綁事件”這篇文章的內容,相信大家都有了一定的了解,希望小編分享的內容對大家有幫助,若想了解更多相關的知識內容,請關注億速云行業資訊頻道。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。