在组件中绑定一个事件处理函数。
例如,在首页中我们添加一个跳转事件,添加bindtap
<view class="usermotto">
<text class="user-motto" bindtap='clicktext'>开始动工啦</text>
</view>
<view class="btn-area">
<view bindtap='toDemo' hover-class="navigator-hover">跳转demo页面 </view>
<navigator url="../demo/demo2" hover-class="navigator-hover">跳转demo2页面 </navigator>
</view>
toDemo: function () {
wx.navigateTo({
url: '../demo/demo'
})
}
当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数,跳转到demo页面。然后在对应的js中写出事件的具体实现方法
事件分为冒泡事件和非冒泡事件
冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递 (使用catchtap阻止向上冒泡)
非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递
注:除上表之外的其他组件自定义事件都是非冒泡事件
事件绑定的写法同组件的属性,以key、value的形式。
key以bind或catch开头,然后跟上事件的类型,如bindtap, catchtouchstart
value是一个字符串,需要在对应的Page中定义同名的函数。不然当触发事件的时候会报错。
bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡。
如在下边这个例子中,点击inner view会先后触发handleTap3和handleTap2(因为tap事件会冒泡到middle view,而middle view阻止了tap事件冒泡,不再向父节点传递),点击middle view会触发handleTap2,点击outter view会触发handleTap1。
<view id="outter" bindtap="handleTap1">
outer view
<view id="middle" catchtap="handleTap2">
middle view
<view id="inner" bindtap="handleTap3">
inner view
</view>
</view>
</view>
如无特殊说明,当组件触发事件时,逻辑层绑定该事件的处理函数会收到一个事件对象。
BaseEvent基础事件对象属性列表:
属性 类型 说明
type String 事件类型
timeStamp Integer 事件生成时的时间戳
target Object 触发事件的组件的一些属性值集合
currentTarget Object 当前组件的一些属性值集合
CustomEvent 自定义事件对象属性列表(继承 BaseEvent):
属性 类型 说明
detail Object 额外的信息
TouchEvent 触摸事件对象属性列表(继承 BaseEvent):
属性 类型 说明
touches Array 触摸事件,当前停留在屏幕中的触摸点信息的数组
changedTouches Array 触摸事件,当前变化的触摸点信息的数组
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。