首先，在组件中绑定一个事件处理函数。如下所示，事件绑定的属性是bindtap，绑定的事件名称是tapName，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数tapName。

//view组件的唯一标识id值为tapTest；自定义属性hi，其值为MINA；绑定事件tapName。
<view id = "tapTest" data-hi = "MINA" bindtap = "tapName"> Click me </view> 

 （bindtap=bind+tap，即绑定的是冒泡事件tap。）

其次，要在页面.js文件的Page定义中写上相应的事件处理函数，参数是event。如下所示：

Page（{
    tapName: function(event){
        console.log(event) 
    }
}）

 如果我们将上述两段代码分别放入.wxml和.js文件中，编译之后我们就可以看到控制台的console中显示的log信息，大致如下：

{
    “type": "tap",
    "timeStamp": 1252,
    "target": {
        "id": "tapTest",
        "offsetLeft": 0,
        "offsetTop": 0,
        "dataset": {
            "hi": "MINA"
        }
    },
"currentTarget": {
    "id": "tapTest",
    "offsetLeft": 0,
    "offsetTop": 0,
    "dataset": {
        "hi": "MINA"
    }
},
"touches": [{
    "pageX": 30,
    "pageY": 12,
    "clientX": 30,
    "clientY": 12,
    "screenX": 112,
    "screenY": 151
}],
"detail": {
    "x": 30,
    "y": 12
}
}

事件详解

微信小程序中的事件分为两种：冒泡与非冒泡。

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

WXML中的冒泡事件仅有6个：

    touchstart  手指触摸； touchmove  手指触摸后移动； touchcancel  手指触摸动作被中断，如来电提醒、弹窗；

    touchend  手指触摸动作结束；  tap  手指触摸后离开；  longtap  手指触摸后，超过350ms再离开  

除上述事件之外的其他组件自定义事件都是非冒泡事件。

事件绑定的写法跟组件属性写法相同，都是以key、value的形式：

key以bind或catch开头，后面紧跟事件类型，如bindtap、catchtap。

value是一个字符串，需要在对应的Page中定义同名函数， 不然在事件被触发时会报错。

bind和catch的区别在于，bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

例如：

<view id = "outter" bindtap = "handleTap1">
    out view 
    <view id = "middle" catchtap = "handleTap2">
        middle view 
        <view id = "inner" bindtap = "handleTap3">
            inner view 
        </view>
    </view>
</view>

上面的代码片段中，点击 id 为 inner 的view组件会先后触发 handleTap3 和 handleTap2 ，因为事件会冒泡到 id 为 middle 的组件，而 middle 组件阻止了事件冒泡，不再向上传递。点击 id 为 middle 的view组件会触发 handleTap2，点击 id 为 outter 的view组件会触发 handleTap1。

逻辑层的事件处理函数会收到一个事件对象，这个事件对象具有的属性如下：

1. type，说明事件的类型，value类型为String；
2. timeStamp，事件生成时的时间戳，value类型为Integer；
3. target，触发事件组件的一些属性值集合，value类型为Object；
4. currentTarget，当前组件的一些属性值集合，value类型为Object；
5. touches，触摸事件，当前停留在屏幕中触摸点信息的数组，value类型为Array；
6. changedTouches，触摸事件，当前变化的触摸点信息的数组，value类型为Array；
7. detail，额外的信息，value类型为Object；

其中，target是指触发事件的源组件，是一个对象，它本身也有三个属性：

1. id，事件组件的id；
2. tagName，事件组件的类型；
3. dataset，事件组件上，由data-开头的自定义属性组成的集合；

而currentTarget是事件的当前组件。与target类似也是一个对象并且同样具有上述的3个属性 。

target和currentTarget的区别可以参考上面的代码片段中，点击 inner view 时，handleTap3 收到的事件对象 target 和 currentTarget 都是inner，而 handleTap2 收到的事件对象 target 就是 inner ,currentTarget 就是 middle。

dataset 在组件中可以定义数据，这些数据将通过事件传递给 App Service 。dataset 书写方式以 data- 开头，多个单词由连字符 “-” 连接，不能有大写（会自动转换成小写）。如data-element-type，最终在 event.target.dataset 中会将连字符转成驼峰形式：elementType。

示例代码如下：