上一篇文章实现了第一个Hello World小程序，但这个小程序仅仅实现了最简单的展示功能。在实际情况中，我们往往需要小程序对各类事件（如点击等）进行响应，以实现更丰富的交互功能。本文主要介绍在小程序中简单的一些响应事件的实现。

1. 什么是事件

微信开放文档里面对事件的定义如下：

·事件是视图层到逻辑层的通讯方式。

·事件可以将用户的行为反馈到逻辑层进行处理。

·事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。

·事件对象可以携带额外信息，如 id, dataset, touches。

从上面的定义我们可以看到，要实现一个事件，需要完成以下两步：给组件绑定事件和编写事件处理函数（回调函数）。

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

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

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

2. 绑定事件

绑定事件有两种方式，一种是用bind，一种是用catch。区别在于后者会阻止事件向上冒泡，即不再向父节点传递。

以点击事件为例，我们介绍如何绑定普通的事件。

首先我们要选定触发事件的组件，这里我们将上次小程序显示出来的“Hello World”那行字作为绑定点击事件的组件，将index.wxml文件修改如下。

其中，catchtap和class是Hello World这个text元素的两个属性，它们的值（value）分别为“click”和“{{color}}”。与HTML相似，WXML的属性设置也是用key-value形式。

注意：value的值必须要在双引号内。

catchtap由catch和tap组成，catch表示阻止事件冒泡，tap表示触发条件为“手指触摸后马上离开”。具体的冒泡事件列表如下。

在这里，这个点击事件的值被设置为"click"，那么当用户点击Hello World时，Page中的click就会被调用。

class表示为wxml元素定义一个或多个类名（classname）(类名从样式文件引入)。这里我们设置为在index.js中定义的一个变量color。{{ }}符号经常表示里面可以进行运算，在表示这是一个数据绑定。此时，页面的tShopfas.data.color 必须是一个字符串，指定事件处理函数名；如果它是个空字符串，则这个绑定会失效（可以利用这个特性来暂时禁用一些事件）。这个变量将在下面介绍如何定义。

3.事件处理函数

在上面，我们将点击事件的属性值设为“click"，因此我们需要在index.js中，将一个处理事件的函数赋给变量click。这个处理事件的函数可以编写如下：

我们重点关注的是添加的click:fucntion()这个函数，它就是点击事件的处理函数。当点击Helllo World时，控制台会出现”click"这样的文字，并伴随函数中写到的变色操作。

变色操作具体是如何实现的呢？首先，从上图可以看到，我们在index.js中设置了两个全局变量，分别是flag和color。flag用于记录被点击的状态，color用于表示颜色的状态。在这里color在不同的condition下被赋予了两个不同的值——"window"和"window-change_color"。]

在上一篇文章中我们讲过，wxss文件用来表示小程序中的内容的显示样式。因此，我们应该在index.wxss文件中定义颜色。.class是选择器，例如.window表示选择所有window类的对象，将它们的color属性设为#c32f20。

而回到index.js文件中，在Page的data部分，我们申请了一个color变量，属性值为"window"，即index.wxss中的样式名称。setData 函数用于将数据从逻辑层发送到视图层，同时改变对应的 tShopfas.data 的值。这样，我们就实现了文字颜色的修改。