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 : 采用事件代理的方式来实现事件绑定的。

  
  <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 上带执行事件
`