目录1、什么是事件2、如何使用事件3、bindtap和catchtap的区别4、小程序中事件分为冒泡事件和非冒泡事件。事件之target&¤tTarget
(1) 事件是视图层到逻辑层的通讯方式。
(2) 事件可以将用户的行为反馈到逻辑层进行处理。
(3) 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。
(4) 事件对象可以携带额外信息,如 id,dataset,touches
(1) 简单来说就是将事件绑定到组件上面,bindtap和catchtap都属于点击事件,绑定了之后点击组件可以触发这个函数。
(2) 函数tapName会接受一个参数event,event里面存储了一些函数调用的上下文信息
(3) 标签元素
<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>
(4) 绑定事件
Page({
tapName: function(event) {
console.log(event)
}
})
(1) 相同点:首先他们都是作为点击事件函数,就是点击时触发。在这个作用上他们是一样的,可以不做区分。
(2) 不同点:他们的不同点主要是bindtap是冒泡的,catchtap是非冒泡的。
(1) 本文以冒泡事件tap(手指触摸后马上离开,也就是点击事件)为例子来区别bind和catch事件
(2) bindtap? 事件绑定不会阻止冒泡事件向上冒泡
(3) catchtap? 事件绑定可以阻止冒泡事件向上冒泡
还是采用上面的wxml&&wxss代码, 这次我们修改下js代码的打印值;
// js
outerTapFn(e) {
console.log("我是外层父元素被点击了=.=",e);
},
innerTapFn(e) {
console.log("我是内层子元素被点击了=.=",e);
},
target对应的是触发事件的源头组件,这个组件有可能是子组件,有可能是父组件,主要是看执行动作的区域。而currentTarget始终对应事件所绑定的组件;
1、假如有三个view点击事件都是用的bindtap,三个view是层级包含关系?
<view id="outer" bindtap="out">
outer view
<view id="middle" bindtap="middle">
middle view
<view id="inner" bindtap="inner">
inner view
</view>
</view>
</view>
2、我么在js里代码是在相对应的事件打印出log,代码如下?
out:function(e){
console.log("--out bindtap click")
}, middle: function (e) {
console.log("--middle bindtap click")
}, inner: function (e) {
console.log("--inner bindtap click")
}
3、bindtap执行结果
4、如果我们只修改middle view的bindtap为catchtap
到此这篇关于微信小程序bindtap与catchtap的区别详解的文章就介绍到这了,更多相关小程序bindtap与catchtap内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: 微信小程序bindtap与catchtap的区别详解
本文链接: https://www.lsjlt.com/news/135767.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0