微信小程序简单实战（微信小程序从入门到学会第六天-------小程序的事件）

前面讲到了关于小程序中如何使用脚本，今天我们要讲的是在小程序中如何快速进行交互，也就是所谓的组件事件了，很显然，没有事件的支撑，咱们的组件是没有灵魂的。那么今天就让我们一起步入小程序中事件的学习吧。

微信小程序中的事件基本和JavaScript中的事件，唯一不同的是他在原先的基础上加了一个bind（不阻止事件冒泡）后者catch（阻止事件冒泡），以及 capture-bind(捕获并监听事件不阻止冒泡)和capture-catch(阻止捕获阻止冒泡)，如下：

以上这些都是冒泡事件。在事件的前缀中还有mut-bind，他们只和bind一块儿使用，它和bing的区别在于嵌套同级的组件触发事件后不会产生冒泡，也就是互不影响，点击哪个就触发哪个，而bind和catch则不是。

要想使用这些事件也很简单，我们可以现在模板文件同名不同后缀的js文件里声明一个可以操作的函数，如下：

然后我们将这些函数应用到模板文件中，如图：

我们可以将wxs中的函数应用到事件上，首先声明一个函数，如下：

然后引入模板文件内的脚本组件中，如下：

可以看到，成功输出。

看起来牛逼轰轰的，首先我们得在js文件中声明一个数据，它的值为一个函数名，如图：

然后我们再来使用这个绑定的数据来执行脚本，如下：

让我们来看下事件是有哪几部分组成的，如图：

changedTouches ：当前变化的触摸点信息的数组(多点触控) currentTarget：当前组件的一些属性值集合 detail：额外的自定义信息 mark:触发事件的target节点数据 mut:是否互不干扰 target：触发事件的源组件的一些属性值集合 timeStamp：事件生成时的时间戳(毫秒数) touches：当前停留在屏幕中的触摸点信息的数组(多点触控) type：事件类型

刚刚我们之所以说事件的组成，是因为它不仅仅包含我们的组件的信息，也可以让我们自定义一些属性，而且自定义的属性就在我们的源组件中保留，以data-开头，如图：

然后引入，如图：

也是实现了自定义属性的调用。

如果我们想要通过给每个事件一个标记，当标记为某个值的时候就触发这个事件，这个时候mark就能派上用场了，如图：

然后我们引入这个函数，如图：

此时单击这个按钮就可以显示或者隐藏下面的文本了。

除了上述的一些事件以外，还有一些表单事件，这些表单的事件通常只能作用于表单组件中，下面我们先来看下输入框的用法：

以上就是我们要说的关于事件的所有内容了，虽然不难，不过比较多，大家可以多敲敲来巩固下自己的基础。下篇文章我们来将下自定义组件。更多精彩好文敬请关注公众号简易编程网。