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

微信小程序-绑定事件以及bindtap和catchtap的区别前言在微信小程序的开发过程中我们肯定会遇到时间绑定的问题,这时候我们一般都是采用bandtap或者是catchtap进行事件绑定的。那么他们两个的区别在哪里呢?一、首先我们要先知道什么是事件微信官方给出的事件的解释是:事件是视图层到逻辑层的通讯方式。事件可以将用户的行为反馈到逻辑层进行处理。事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。事件对象可以携...

前言

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

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

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

  1. 事件是视图层到逻辑层的通讯方式。
  2. 事件可以将用户的行为反馈到逻辑层进行处理。
  3. 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。
  4. 事件对象可以携带额外信息,如 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的区别

  • 相同点:
    首先他们都是作为点击事件函数,就是点击时触发。在这个作用上他们是一样的,可以不做区分。
  • 不同点:
    他们的不同点主要是一个是冒泡的,一个是非冒泡的。可能大家还是有点疑惑,如何理解这两个词呢?下面我举一个例子来说明:
此代码由Java架构师必看网-架构君整理
<view id="1"> <view id="2" catchtap="onclick1"> </view> </view>

这里我假设有两个view,用ID做以区分。
我这里画一个图:
图1
假设ID为1的view叫view1,ID为2的view叫view2。我这里用了两个嵌套的盒子来表明这两个WXML元素的层级关系。

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

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

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

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

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

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

  1. bindtap里面写catchtap
    如果bindtap里面写catchtap,那么bindtap会继续向上冒泡,而catchtap则不会冒泡,相当于这两个子父级元素绑定的是不同的事件。如果bindtap绑定的组件还有父级元素,那么它的父级元素就具有bindtap绑定的事件函数。
  2. catchtap里面写了bindtap
    如果catchtap里面绑定了bindtap呢,是这样的。从外层分析,catchtap那一级不会继续上传递事件函数。从catchtap绑定的元素到bindtap绑定的元素之间的元素中不管隔了多少层(假设只有这两个事件),都会被bindtap事件冒泡,具有bindtap的事件函数。知道catchtap组件那一层停止 。说起来可能不好理解,看下图:
    在这里插入图片描述
    假如view1是catchtap
    view3是bindtap,那么由于冒泡机制,view2也会具有bindtap的事件函数。

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

谢谢浏览

架构君码字不易,如需转载,请注明出处:https://javajgs.com/archives/210137
0
   

发表评论