当前位置:微信小程序开发 > 小程序资讯 > 小程序开发教程 > 小程序开发公司:教你进行事件的触发与绑定开

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

2018-06-06 16:55 来源: 霸界科技

摘要:霸界科技小程序开发公司认为,事件的触发与绑定是小程序开发过程中的基础工作内容之一,因为事件是视图层到逻辑层的通讯方式,他可以将 用户的行为反馈到逻辑层进行处理,当其...

期权保本理财
  霸界科技小程序开发公司认为,事件的触发与绑定是小程序开发过程中的基础工作内容之一,因为事件是视图层到逻辑层的通讯方式,他可以将 用户的行为反馈到逻辑层进行处理,当其被绑定在组件上,达到触发事件,就会执行逻辑层中对应的事件处理函数,而事件对象就可以携带额外信息,如 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("孙子节点被点击")
 
  },
 
  })
分享到:
最新评论

网友:

验证码: 点击我更换图片

联系我们

业务咨询:15918761088

招商咨询:15918761088(微信同号)

周一至周五 9:30-18:30

公司地址:广州市海珠区昌岗中路166号富盈国际大厦2505室

官方微信 官方微博

Copyright © 2018 www.keji168.com 广州霸界网络科技有限公司版权所有 粤ICP备18083764号-1

客服
套餐咨询,合作细节等
在线客服
电话咨询
159-1876-1088