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

2018/4/27 18:55:06
摘要: 事件的触发与绑定是小程序开发过程中的基础工作内容之一,因为事件是视图层到逻辑层的通讯方式,他可以将 用户的行为反馈到逻辑层进行处理

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

  },

})

声明:文章"小程序开发公司:教你进行事件的触发与绑定开发"为互诚科技—微信小程序开发公司的原创文章,转载请注明出处,谢谢合作!
标签:小程序干货
电话咨询:18011971195(黄先生)
在线留言:
微信扫码,关注我们
相关文章
  • 微信小程序最终会不会取代公众号?

    微信小程序自出现以来就很多人在预言,说由于小程序跟公众号没什么不同,但使用比公众号更加方便,所以最终可能就会取代公众号。这个说法到底对不对呢,有没有可能呢,是不是会成真呢?小编认为还是不太可能的,两者虽然有相似的地方,但是也有不同

  • 个人开发者如何开发微信小程序

    虽然微信小程序一开始并不支持个人开发者开发小程序,但是后来依旧放开了这一限制,只要实名认证的个人就可以成为小程序的开发者,加入到这一潮流行列当中。不过,个人开发者中有懂代码的、有技术人员支持的、当然也有没人才又不懂代码的,到底个人开发者要如何去开发微信小程序呢?这个问题值得我们来好好探讨一番。

  • 微信小程序升级页面体验让用户爱上你的小程序

    昨日微信小程序开放了新的页面能力,在原有页面能力的基础上对其进行优化和升级,以提高开发者的开发效果跟用户体验的满意度。而升级优化体现在哪些方面,就是小编在今天这篇推文里的主要写作目的。

  • 微信小程序上亿日活跃用户,开发优势日渐显现

    微信小程序上线之前,很多人对它满怀期待,但是线上体验过后,大部分用户又都回归手机应用,因为用户体验并不是多好

  • 定制化微信小程序为何价格会高那么多

    无论是定制版本的微信小程序还是公众号、微商城,价格都会比模板制作的高出一些。那为什么会高?又高在哪里?这两个问题的回答就能让企业商家看出定制开发是否值得,所以小编得摩拳擦掌来好好夸大其词了。

  • 微信小程序内可以直接打开网页的意义何在

    之前腾讯官方就借助微信公开课这个平台公布微信小程序可以直接打开内嵌网页这个新功能

顺金彩票官网 众赢彩票官网 265彩票充值中心 宏图棋牌充值 河北快3走势图 桔子彩票官网 河北快3走势图 桔子彩票官网 顺金彩票官网 河北快3