mpvue & 小程序 中的事件處理

事件綁定

使用方法基本是一樣的。但是在小程序中會編譯成 bindtap

捕獲冒泡

小程序： .wxml
<view 
  id="wrapper"
  bind:tap="bind1"
  capture-bind:tap="cbind1"
  style="background:red;color:white;text-align:center;padding:10px;"
>
  <view
    id="inner"
    bind:tap="bind2"
    capture-bind:tap="cbind2"
  >
    事件的捕獲和冒泡測試
  </view>
</view>

// 小程序： .js
Page({
  bind1(e) {
    console.log('wrapper冒泡')
  },
  bind2(e) {
    console.log('inner冒泡')
  },
  cbind1(e) {
    console.log('wrapper捕獲')
  },
  cbind2(e) {
    console.log('inner捕獲')
  }
})



• mpvue 中支持冒泡事件。不支持捕獲事件 示例代碼略
• 小程序中可以支持冒泡和捕獲

事件攔截

• mpvue

  兩種方法：使用catshap或者使用事件修飾符.stop

  <!-- 事件攔截方案一 -->
  <p @click="bind1">
  
    <button
  
      @click="bind2" catchtap >
  
      事件的捕獲和冒泡測試
  
    </button>
  
  </p>
  
  <!-- 事件攔截方案二 -->
  
  <p @click="bind1">
  
      <button @click.stop="bind2" >
  
          事件的捕獲和冒泡測試
  
      </button>
  
  </p>
  

• xcx
  捕獲： 使用capture-catch 實現捕獲攔截
  冒泡： 使用catch實現冒泡攔截

事件對象

• 小程序 都在event參數中
• mpvue 事件響應時會傳入event 參數， 包含組件信息，參數信息，觸摸點信息

事件內聯參數

• 小程序 主要是data參數和mark 參數
• mpvue 綁定事件時可以直接傳入參數。 或者是匿名函數 。

支持的事件類型

• 小程序
  • touchstart
  • touchmove
  • touchend
• mpvue // 用於小程序的 event type 到 web 的 event
var eventTypeMap = {
tap: ['tap', 'click'],
touchstart: ['touchstart'],
touchmove: ['touchmove'],
touchcancel: ['touchcancel'],
touchend: ['touchend'],
longtap: ['longtap'],
input: ['input'],
blur: ['change', 'blur'],
submit: ['submit'],
focus: ['focus'],
scrolltoupper: ['scrolltoupper'],
scrolltolower: ['scrolltolower'],
scroll: ['scroll']
};

事件代理

• 小程序 ： wxs事件綁定： 綁定的時候會多傳入一個頁面級的instance參數

• mpvue : 採用事件代理的方式來實現事件綁定的。

  <!-- mpvue 事件綁定 -->
  <button @click="bind">事件的捕獲和冒泡測試</button>
  
  <!-- 編譯成小程序版本 -->
  
  <button
  
    bindtap="handleProxy"
  
    data-eventid="{{'0'}}"
  
      data-comkey="{{$k}}"
  
      class="_button data-v-65f59a68"
  
  >
  
    事件的捕獲和冒泡測試
  
  </button>
  
  具體解析：https://www.imooc.com/read/45/article/807
  

  `
  冒泡：p ul li a比如給最裏面的a加一個click點擊事件，那麼這個事件就會一層一層的往外執行，執行順序a li ul p這就是冒泡

事件委託也叫事件代理：如上例子 事件在p 上帶執行事件
`