微信小程序 bindtap与catchtap的事件使用和区别

一时失言乱红尘 2023-02-13 05:54 17阅读 0赞

### 1、什么是事件 ###

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

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

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

(4) 事件对象可以携带额外信息，如 id,dataset,touches

### 2、如何使用事件 ###

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

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

(3) 标签元素

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>&lt;</code><code>view</code>&nbsp;<code>id="tapTest" data-hi="WeChat" bindtap="tapName"&gt; Click me! &lt;/</code><code>view</code><code>&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

(4) 绑定事件

<table style="width:403px;"> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 </td> 
 <td style="width:387px;"> <code>Page({ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>tapName:&nbsp;</code><code>function</code><code>(event) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(event)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>})</code> </td> 
 </tr> 
 </tbody> 
</table>

## ##

### 3、bindtap和catchtap的区别 ###

(1) 相同点：首先他们都是作为点击事件函数，就是点击时触发。在这个作用上他们是一样的，可以不做区分。

(2) 不同点：*他们的不同点主要是bindtap是冒泡的，catchtap是非冒泡的。*

### 4、小程序中事件分为冒泡事件和非冒泡事件。 ###

(1) 本文以冒泡事件tap（手指触摸后马上离开，也就是点击事件）为例子来区别bind和catch事件

(2) bindtap? 事件绑定不会阻止冒泡事件向上冒泡

(3) catchtap? 事件绑定可以阻止冒泡事件向上冒泡

注：子元素用bindtap绑定事件后，执行的时候，会冒泡到父元素（触发父亲元素上绑定的bindtap事件）如果不想冒泡到父元素，可以用catchtap代替

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTE2MTY0_size_16_color_FFFFFF_t_70][]

### 5、例子 ###

1、假如有三个view点击事件都是用的bindtap，三个view是层级包含关系?

![format_png][]

<table style="width:516px;"> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 </td> 
 <td style="width:500px;"> <code>&lt;</code><code>view</code>&nbsp;<code>id="outer" bindtap="out"&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>outer view</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>view</code>&nbsp;<code>id="middle" bindtap="middle"&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>middle view</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>view</code>&nbsp;<code>id="inner" bindtap="inner"&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>inner view</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/</code><code>view</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/</code><code>view</code><code>&gt;</code> <code>&lt;/</code><code>view</code><code>&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

2、我么在js里代码是在相对应的事件打印出log，代码如下?

<table style="width:529px;"> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 </td> 
 <td style="width:513px;"> <code>out:</code><code>function</code><code>(e){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>"--out bindtap click"</code><code>)</code> <code>}, middle:&nbsp;</code><code>function</code>&nbsp;<code>(e) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>"--middle bindtap click"</code><code>)</code> <code>}, inner:&nbsp;</code><code>function</code>&nbsp;<code>(e) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>"--inner bindtap click"</code><code>)</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

3、bindtap执行结果

点击out view打印出一条log --> out bindtap click

点击middle view打印出两条log --> middle bindtap click--out bindtap click

点击innew view打印出三条log --> inner bindtap click--middle bindtap click--out bindtap click

可以看出bindtap不阻止向上冒泡，所以点击inner一直冒泡到了最外层。

4、如果我们只修改middle view的bindtap为catchtap

点击out view打印出一条log --> out bindtap click（因为没有上层元素故而无法向上冒泡）

点击middle view打印出一条log --> middle bindtap click（catchtap阻止向上冒泡）

点击innew view打印出两条log --> inner bindtap click--middle bindtap click（catchtap阻止向上冒泡）

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTE2MTY0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200527194649835.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTE2MTY0,size_16,color_FFFFFF,t_70
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTUzNTQ5NS8yMDE5MDIvMTUzNTQ5NS0yMDE5MDIxODEzMDA1NDI1OS04NTg2Nzk1OTUucG5n?x-oss-process=image/format,png