1. 程式人生 > >微信小程式頁面跳轉事件繫結/冒泡,非冒泡事件

微信小程式頁面跳轉事件繫結/冒泡,非冒泡事件

什麼是事件

事件是檢視層到邏輯層的通訊方式。
事件可以將使用者的行為反饋到邏輯層進行處理。
事件可以繫結在元件上,當達到觸發事件,就會執行邏輯層中對應的事件處理函式。
事件物件可以攜帶額外資訊,如 id, dataset, touches。

  • 在元件中繫結一個事件處理函式。
    如bindtap,當用戶點選該元件的時候會在該頁面對應的Page中找到相應的事件處理函式
  <view bindtap="view">
       <text bindtap="toast"  class="journey">開啟小程式之旅      </text
>
</view>
  • 子元素觸發父級元素也會觸發若要只觸發子元素使用catchtap代替bindtap

  • 在相應的Page定義中寫上相應的事件處理函式,引數是event。

Page({
  toast: function (event) {
    // wx.navigateTo({
    //   url: '../redirect/redirect'
    // });


    wx.redirectTo({
      url: '../redirect/redirect',
    });
    // view:function(event){
    //   // 父級元素
// } }, /** * 生命週期函式--監聽頁面隱藏/並未關閉返回 */ onHide: function (event) { console.log(event) }, /** * 生命週期函式--監聽頁面解除安裝/ */ onUnload: function () { console.log(222) }, })

事件分類

冒泡事件:當一個元件上的事件被觸發後,該事件會向父節點傳遞。
非冒泡事件:當一個元件上的事件被觸發後,該事件不會向父節點傳遞。

  • WXML的冒泡事件列表:
型別  觸發條件
touchstart  手指觸控動作開始
touchmove   手指觸控後移動
touchcancel 手指觸控動作被打斷,如來電提醒,彈窗
touchend    手指觸控動作結束
tap 手指觸控後馬上離開
longtap 手指觸控後,超過350ms再離開
注:除上表之外的其他元件自定義事件如無特殊申明都是非冒泡事件,如<form/>的submit事件,<input/>的input事件,<scroll-view/>的scroll事件,(詳見各個元件官方文件)

所謂的光輝歲月,並不是後來,閃耀的日子,而是無人問津時,你對夢想的偏執。