小程序开发公司：教你进行事件的触发与绑定开发

事件的触发与绑定是小程序开发过程中的基础工作内容之一，因为事件是视图层到逻辑层的通讯方式，他可以将 用户的行为反馈到逻辑层进行处理，当其被绑定在组件上，达到触发事件，就会执行逻辑层中对应的事件处理函数，而事件对象就可以携带额外信息，如 id, dataset, touches。所以，事件的触发与绑定对于小程序的运行来说也是非常重要的一环，下面我们简单说说其中的一些工作内容。

  1、事件的绑定

通过事件绑定来完成对用户操作的响应，比如要处理view标签的tap事件，首先要在在标签属性中添加bindtap = 'tapName', 然后在.js中添加tapName函数。示例代码如下所示：

//wxml

<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>

//.js

Page({

  tapName: function(event) {

    console.log(event)

  }

})

  2、event对象中与事件相关的参数说明

 （1）target：触发事件的组件

 （2）currentTarget：当前组件

 （3）type：事件类型

 （4）timeStamp：时间戳，即页面打开到触发事件所经过的毫秒数

 （5）touches：包含触摸点的数组，为多点触控

 （6）changedTouches ：发生改变的触摸点的数组，为多点触控

 （7）detail：额外的自定义信息

  3、事件的分类

  事件分为两类，一种是冒泡事件，一种是非冒泡事件。冒泡事件即当一个组件上的事件被触发后，该事件会向父节点传递。 而非冒泡事件则是当一个组件上的事件被触发后，该事件不会向父节点传递。其中tap事件是属于冒泡事件(这也是为什么上面例子中的event会包含currentTarget)，另外其它的冒泡事件还包括

  4、阻止冒泡事件触发

在有些情况下，开发者会希望阻止事件的冒泡行为，在这种情况下可以使用catch事件绑定来阻止时间的冒泡行为，如catchtap。示例代码如下：

//.wxml

<view id="outter" bindtap="handleTapOutter">

  我是父亲节点

  <view id="middle" catchtap="handleTapMiddle">

    我是儿子节点

    <view id="inner" bindtap="handleInner">

      我是孙子节点

    </view>

  </view>

</view>

//.js

Page({

  handleTapOutter: function(event) {

    console.log("父亲节点被点击")

  },

  handleTapMiddle: function(event) {

    console.log("儿子节点被点击")

  },

  handleInner: function(event) {

    console.log("孙子节点被点击")

  },

})