事件分类
事件分为冒泡事件和非冒泡事件：
- 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
- 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。
WXML的冒泡事件列表：
|
类型 |
触发条件 |
|
touchstart |
手指触摸动作开始 |
|
touchmove |
手指触摸后移动 |
|
touchcancel |
手指触摸动作被打断，如来电提醒，弹窗 |
|
touchend |
手指触摸动作结束 |
|
tap |
手指触摸后马上离开 |
|
longpress |
手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发 |
|
longtap |
手指触摸后，超过350ms再离开（推荐使用longpress事件代替） |
|
transitionend |
会在 WXSS transition 或 wx.createAnimation 动画结束后触发 |
|
animationstart |
会在一个 WXSS animation 动画开始时触发 |
|
animationiteration |
会在一个 WXSS animation 一次迭代结束时触发 |
|
animationend |
会在一个 WXSS animation 动画完成时触发 |
|
touchforcechange |
在支持 3D Touch 的 iPhone 设备，重按时会触发 |
注：除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件，如 form 的submit事件，input 的input事件，scroll-view 的scroll事件
普通事件绑定
事件绑定的写法类似于组件的属性，可以使用bind进行绑定，如：
<view bindtap="handleTap"> Click here! </view>
绑定并阻止事件冒泡
除 bind 外，也可以用 catch 来绑定事件。与 bind 不同， catch 会阻止事件向上冒泡。
<view id="outer" bindtap="handleTap1"> outer view <view id="middle" catchtap="handleTap2"> middle view <view id="inner" bindtap="handleTap3"> inner view </view> </view> </view>
.wxml文件
1 <view>利用bindinput和this.setData实现双向绑定</view> 2 <input type="digit" placeholder="请输入数字" bindinput="handleInput" value="{{num}}"/> 3 4 <view>model:value双向绑定语法</view> 5 <!-- 设置type="digit",只会弹出有小数点的键盘 --> 6 <input type="digit" placeholder="请输入数字" model:value="{{num}}"/> 7 8 <button bindtap="handleTap" data-opnum="{{1}}">+</button> 9 <button bindtap="handleTap" data-opnum="{{-1}}">-</button> 10 <view> 11 结果：{{num}} 12 </view>
.js文件
Page({ data: { num:0 }, // 输入框input事件的执行逻辑 handleInput: function(e){ this.setData({ num:e.detail.value }) }, // 加减按钮点击事件 handleTap(e){ // 1.获取自定义属性opnum const opnum = e.currentTarget.dataset.opnum; this.setData({ num: Number(this.data.num) + Number(opnum) }) }, })