小程序中的事件

事件

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

什么是事件

• 事件是视图层到逻辑层的通讯方式。
• 事件可以将用户的行为反馈到逻辑层进行处理。
• 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
• 事件对象可以携带额外信息，如 id, dataset, touches。

小程序中使用bind关键字绑定事件，常见事件tap并且很多组件都有自己对应的一些事件，比如input组件的bindinput，radio-group组件中的bindchange

事件分类

事件分为冒泡事件和非冒泡事件：

1. 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
2. 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

WXML的冒泡事件列表：

类型	触发条件	最低版本
touchstart	手指触摸动作开始
touchmove	手指触摸后移动
touchcancel	手指触摸动作被打断，如来电提醒，弹窗
touchend	手指触摸动作结束
tap	手指触摸后马上离开
longpress	手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发	1.5.0
longtap	手指触摸后，超过350ms再离开（推荐使用longpress事件代替）
transitionend	会在 WXSS transition 或 wx.createAnimation 动画结束后触发
animationstart	会在一个 WXSS animation 动画开始时触发
animationiteration	会在一个 WXSS animation 一次迭代结束时触发
animationend	会在一个 WXSS animation 动画完成时触发
touchforcechange	在支持 3D Touch 的 iPhone 设备，重按时会触发	1.9.90

普通事件绑定

事件绑定的写法类似于组件的属性:

//index.wxml
<view bindtap="fun">
123456789
</view>

//index.js
Page({
  fun:function(e){
   console.log("我是fun")
  }
})

 

 

绑定并阻止事件冒泡

除 bind 外，也可以用 catch 来绑定事件。与 bind 不同， catch 会阻止事件向上冒泡。

//index.wxml
<view id="outer" bindtap="handleTap1">
  outer view
  <view id="middle" bindtap="handleTap2">
    middle view
    <view id="inner" bindtap="handleTap3">
      inner view
    </view>
  </view>
</view>

//index.js
Page({
  handleTap1:function(){
    console.log("outer view")
  },
  handleTap2:function(){
    console.log(" middle  view")
  },
  handleTap3:function(){
    console.log("inner view")
  }
})

 

 此时我们将bindtap改为catchtap，事件不会进行向上冒泡

事件函数如何传参，通过自定义属性给事件函数传参：

//index.wxml文件
<view bindtap="fun" data-value="{{123}}">
123456789
</view>
//index.js文件

Page({

  fun:(e)=>{

    console.log(e)

  },

})

获取data的值

//index.wxml
<view bindtap="fun" data-value="{{123}}">
123456789
{{msg}}
</view>

修改data的值，使用setData方法修改