- 一.小程序的事件介绍
- 二.事件的绑定和冒泡
什么是事件
- 事件是视图层到逻辑层的通讯方式。
- 事件可以将用户的行为反馈到逻辑层进行处理。
- 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
- 事件对象可以携带额外信息，如 id, dataset, touches。
- 通过行为进行人机交互
- 类似于html里的onClick onChange 事件等等
代码示例 在event.wxml中写如下的代码, 使用bindtap 来进行绑定点击事件
Click me!
在event.js中, 编写如下的代码, 进行事件的操作
Page({
data: {
},
clickMe: function(){
console.log("被点击事件触发");
}
})
自定义值的设定, 在wxml中定义如下的数据
Click me!
在js中获取如下
Page({
data: {
},
clickMe: function(e){
console.log("被点击事件触发");
console.log(e);
var customdata = e.currentTarget.dataset.customdata;
var customname = e.currentTarget.dataset.customname;
var customsex = e.currentTarget.dataset.customsex;
console.log(customdata);
console.log(customname);
console.log(customsex);
}
})
控制台打印如下: 说明成功获取到了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 动画完成时触发
二.事件的绑定和冒泡事件绑定的写法同组件的属性，以 key、value 的形式。
- key 以bind或catch开头，然后跟上事件的类型，如bindtap、catchtouchstart。自基础库版本 1.5.0 起，在非原生组件中，bind和catch后可以紧跟一个冒号，其含义不变，如bind:tap、catch:touchstart。
- value 是一个字符串，需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。 bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。
如在下边这个例子中，点击 inner view 会先后调用handleTap3和handleTap2(因为tap事件会冒泡到 middle view，而 middle view 阻止了 tap 事件冒泡，不再向父节点传递)，点击 middle view 会触发handleTap2，点击 outer view 会触发handleTap1。
outer view
middle view
inner view
更多详细内容,可以参考官方文档 https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html
