小程序——事件

什么是事件

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

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

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

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

事件分类

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

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

事件绑定

事件绑定的写法同组件的属性,以 key、value 的形式。

key 以 bind 或 catch 开头,然后跟上事件的类型,如 bindtap、catchtouchstart 。(1.5.0 以后的版本中 bind 和 catch 后面可以加一个冒号,其含义不变,如 bind:tap 、catch:touchstart 。)

value 是一个字符串,需要在对应的 Page 中定义同名的函数。否则当触发事件的时候会报错。

bind 事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡。

outer view

middle view

inner view

注:点击 inner view 会先后调用 handleTap3 和 handleTap2(因为 tap 事件会冒泡到 middle view ,而 middle view 阻止了 tap 事件冒泡,不再向父节点传递),点击 middle view 会触发 handleTap2 ,点击 outer view 会触发 handleTap1 。

事件的使用方式

在组件中绑定一个事件处理函数

如 bindtap,当用户点击该组件的时候会在该页面对应的 Page 中找到相应的事件处理函数。

Click me!

在相应的 Page 定义中写上相应的事件处理函数

参数是event。

Page({

tapName: function(event) {

console.log(event)

}

})

PS:上面的 event 也可以缩写为 e

event 表示事件对象,我们在 console.log 后在控制台里可以看到它打印出来好多信息,其中包含了很多内容:谁被点击了、什么时间被点击的、在什么位置被点击的...

附:WXML 的冒泡事件列表:

注:除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件,如 的 submit 事件, 的 input 事件, 的 scroll 事件,(详见各个组件)

This is not the end.

It is not even the beginning of the end.

But it is,

perhaps,the end of the beginning.

更多分享

小众电影

小白教程

实用工具

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180409A1V2WT00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券