前面讲到了关于小程序中如何使用脚本，今天我们要讲的是在小程序中如何快速进行交互，也就是所谓的组件事件了，很显然，没有事件的支撑，咱们的组件是没有灵魂的。那么今天就让我们一起步入小程序中事件的学习吧。
二、事件微信小程序中的事件基本和JavaScript中的事件，唯一不同的是他在原先的基础上加了一个bind（不阻止事件冒泡）后者catch（阻止事件冒泡），以及 capture-bind(捕获并监听事件不阻止冒泡)和capture-catch(阻止捕获阻止冒泡)，如下：
|
类型 |
触发条件 |
最低版本 |
|
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 设备，重按时会触发 |
以上这些都是冒泡事件。在事件的前缀中还有mut-bind，他们只和bind一块儿使用，它和bing的区别在于嵌套同级的组件触发事件后不会产生冒泡，也就是互不影响，点击哪个就触发哪个，而bind和catch则不是。
三、事件的应用1.直接在js文件中使用要想使用这些事件也很简单，我们可以现在模板文件同名不同后缀的js文件里声明一个可以操作的函数，如下：
然后我们将这些函数应用到模板文件中，如图：
我们可以将wxs中的函数应用到事件上，首先声明一个函数，如下：
然后引入模板文件内的脚本组件中，如下：
可以看到，成功输出。
3.把绑定的数据当成函数使用看起来牛逼轰轰的，首先我们得在js文件中声明一个数据，它的值为一个函数名，如图：
然后我们再来使用这个绑定的数据来执行脚本，如下：
让我们来看下事件是有哪几部分组成的，如图：
changedTouches ：当前变化的触摸点信息的数组(多点触控)
currentTarget：当前组件的一些属性值集合
detail：额外的自定义信息
mark:触发事件的target节点数据
mut:是否互不干扰
target：触发事件的源组件的一些属性值集合
timeStamp：事件生成时的时间戳(毫秒数)
touches：当前停留在屏幕中的触摸点信息的数组(多点触控)
type：事件类型
刚刚我们之所以说事件的组成，是因为它不仅仅包含我们的组件的信息，也可以让我们自定义一些属性，而且自定义的属性就在我们的源组件中保留，以data-开头，如图：
然后引入，如图：
也是实现了自定义属性的调用。
六、事件标记如果我们想要通过给每个事件一个标记，当标记为某个值的时候就触发这个事件，这个时候mark就能派上用场了，如图：
然后我们引入这个函数，如图：
此时单击这个按钮就可以显示或者隐藏下面的文本了。
七、表单组件事件除了上述的一些事件以外，还有一些表单事件，这些表单的事件通常只能作用于表单组件中，下面我们先来看下输入框的用法：
以上就是我们要说的关于事件的所有内容了，虽然不难，不过比较多，大家可以多敲敲来巩固下自己的基础。下篇文章我们来将下自定义组件。更多精彩好文敬请关注公众号简易编程网。
,
