前言

在微信小程序的开发过程中我们肯定会遇到时间绑定的问题，这时候我们一般都是采用bandtap或者是catchtap进行事件绑定的。那么他们两个的区别在哪里呢？

一、首先我们要先知道什么是事件

微信官方给出的事件的解释是：

事件是视图层到逻辑层的通讯方式。
事件可以将用户的行为反馈到逻辑层进行处理。
事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
事件对象可以携带额外信息，如 id, dataset, touches。

那我们如何使用事件呢？

简单来说就是将事件绑定到组件上面，bindtap和catchtap都属于点击事件，绑定了之后点击组件可以触发这个函数。

例如：在WXML页面里面定义一个<view>组件，
<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>
将<view>组件里面绑定一个点击事件。同时我们还要在 .js 文件中的Page中定义相应的时间处理函数：
例如：

Page({tapName: function(event) {console.log(event)}
})

函数tapName会接受一个参数event，event里面存储了一些函数调用的上下文信息。

二、bindtap和catchtap的区别

相同点：
首先他们都是作为点击事件函数，就是点击时触发。在这个作用上他们是一样的，可以不做区分。
不同点：
他们的不同点主要是一个是冒泡的，一个是非冒泡的。可能大家还是有点疑惑，如何理解这两个词呢？下面我举一个例子来说明：

<view id="1"> <view  id="2" catchtap="onclick1"></view>
</view>

这里我假设有两个view，用ID做以区分。
我这里画一个图：

假设ID为1的view叫view1，ID为2的view叫view2。我这里用了两个嵌套的盒子来表明这两个WXML元素的层级关系。

我们首先给view2绑定上catchtap=“getName”，当我们鼠标点击view2元素的时候，会触发这个函数。但是我们鼠标点击view1的时候就不会触发函数。这点很容易理解，因为我们只给view2绑定了事件。
但是我们如果给view2绑定了bindtap="getName"的话，当我们点击view2的时候，这时候也会触发这个点击事件。接下来就是不同的地方了，当我们点击view1的时候，getName函数也被触发了。我们没有给view1绑定"getName"点击事件函数，为什么点击view1的时候也会触发呢？

这里就要说冒泡和非冒泡了，我们先看小程序官方给的定义：

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

如果只看定义的话可能不是很明白，什么是父节点，什么是传递，传递的效果是什么？
这里就要解释一下了，在我们举得例子中。

父节点
view1和view2作为WXML元素，view2在view1里面，我们就称谓view1为view2的父节点。父节点可能不是一个，可以是多个。我们举得例子中只有一个。
传递
因为bindtap是冒泡的，所以当我们用bindtap绑定到view2上面的时候，这个bindtap事件会向上传递，就像冒泡泡一样。让view1元素也具有了bindtap="getName"这个事件。这就叫做传递。而catchtap是非冒泡的，所以当给view2绑定catchtap的时候view1不具有这个事件。

到这里冒泡和非冒泡讲完了，但是又有一种更加复杂的情况了。如果bindtap里面写了catchtap呢，或者catchtap里面写了bindtap呢？

bindtap里面写catchtap
如果bindtap里面写catchtap，那么bindtap会继续向上冒泡，而catchtap则不会冒泡，相当于这两个子父级元素绑定的是不同的事件。如果bindtap绑定的组件还有父级元素，那么它的父级元素就具有bindtap绑定的事件函数。
catchtap里面写了bindtap
如果catchtap里面绑定了bindtap呢，是这样的。从外层分析，catchtap那一级不会继续上传递事件函数。从catchtap绑定的元素到bindtap绑定的元素之间的元素中不管隔了多少层（假设只有这两个事件），都会被bindtap事件冒泡，具有bindtap的事件函数。知道catchtap组件那一层停止。说起来可能不好理解，看下图：

假如view1是catchtap
view3是bindtap，那么由于冒泡机制，view2也会具有bindtap的事件函数。

到这里都讲完了，不知道有没有让你明白呢？

谢谢浏览

微信小程序-绑定事件以及bindtap和catchtap的区别相关推荐

微信小程序 - 绑定事件 bindtap（包括是否传入参数）
小程序绑定事件的方式有很多种,这里我只对bindtap的绑定方式进行介绍,其他的绑定方式也是差不多这样的. 1.不带参数的绑定方式 index.wxml文件中:share表示绑定的事件名称 < ...
【微信小程序---绑定事件bindtap跳转】
1.所需要跳转的页面进行 bindtap="f0" 绑定所需要的地方 2.在js页面进行 f0:function(event){函数指向功能} 以上是绑定按钮跳转事件分航线下方是 ...
微信小程序阻止事件冒泡
在vue中阻止事件冒泡的方法使用的event.stopPropagation(); 但微信小程序中事件传递的event却没有stopPropagation()这个方法解决方案:将绑定事件的bindt ...
wxml修改样式_微信小程序动态绑定事件并实现事件修改样式
微信小程序动态绑定事件并实现事件修改样式实例代码 wxml {{item.name}} js var reportTypeList = [ { name: "日报1", id: ...
微信小程序绑定客服，接收不到消息？
微信小程序绑定客服,无法接收用户消息客服文档添加客服 <button class="serviceBtn" open-type="contact"&g ...
为什么java下载安装程序很慢_【关注】微信小程序开发和APP开发的10种区别！
在移动互联网大火的时代,APP和微信小程序已经成为了企业从移动端获取用户流量,实现盈利的重要端口. 因为微信小程序体积小,操作方便,省去了下载安装这一操作,导致这两年微信小程序的势头是越来越猛,甚至有 ...
微信小程序——绑定点击事件
微信小程序出来了那么长时间了,之前一直准备升学和毕业设计(过段时间我要写一写我的毕业设计),最近马上毕业了,终于有时间来研究一下了,先从最简单的点击事件开始吧! 首先我们在test.wxml中加入以下 ...
小程序开发工具绑定服务器,微信小程序绑定到第三方平台流程
微信小程序授权绑定到第三方开放平台的过程,官方文档写的不太清晰,在这里梳理罗列一下. 1 服务器准备,开通开放平台消息校验token:htqa**************** 消息加密Key:NC ...
微信小程序阻止事件冒泡
uniapp阻止事件冒泡:将子类的点击事件@click写成@click.stop 小程序阻止事件冒泡:将子类的点击事件bindtap写成catchtap

微信小程序-绑定事件以及bindtap和catchtap的区别

前言

一、首先我们要先知道什么是事件

二、bindtap和catchtap的区别

谢谢浏览

微信小程序-绑定事件以及bindtap和catchtap的区别相关推荐

最新文章

热门文章