微信小程序-currentTarget与target的区别

简介: 微信小程序可有意思了

在微信小程序中,currentTarget 和 target 是事件对象(Event Object)中的两个属性,用于表示触发事件的组件。

currentTarget:表示当前捕获和冒泡的组件,即事件绑定所在的组件。

target:表示实际触发事件的组件,即事件最初发生的组件。/'//'

简单来说,currentTarget 是事件绑定的组件,而 target 是触发事件的具体子组件。

举个例子,假设有如下一个模板:

<view id="outer" bindtap="handleTap">
  <view id="inner" bindtap="handleTapInner">
    Click Me
  </view>
</view>

当点击内部的 Click Me 文本时,会触发两个事件:handleTapInner 和 handleTap。此时,我们分别在两个回调中(handleTap、handleTapInner),currentTarget 和 target 的取值如下:

在 handleTapInner 中:

currentTarget 的值为 inner 组件,即绑定了事件的组件。

target 的值也为 inner 组件,即最终触发事件的具体子组件。

在 handleTap 中:

currentTarget 的值为 outer 组件,即绑定了事件的组件。

target 的值为 inner 组件,即最终触发事件的具体子组件。

通过理解 currentTarget 和 target 的区别,可以更好地处理事件的冒泡和捕获阶段,以及准确地获取触发事件的具体组件。

我们再将其模板改为 3 层的嵌套,进一步理解它们的区别

<view id="outer" bindtap="handleTap">
  <view id="middle" bindtap="handleTap">
    <view id="inner" catchtap="handleCatchTap">
      Click Me
    </view>
  </view>
</view>

在这个例子中,有三个嵌套的<view>组件,并分别绑定了事件处理函数。其中,inner 组件使用了 catchtap 而不是 bindtap,这意味着在该组件触发的事件会阻止冒泡

现假设点击 Click Me 文本,会触发以下事件:

  1. 在 handleCatchTap 中:
  • currentTarget 的值为 inner 组件,即绑定了事件的组件。

  • target 的值也为 inner 组件,即最终触发事件的具体子组件。

  1. 在 handleTap 中(第一次触发):
  • currentTarget 的值为 middle 组件,即绑定了事件的上层组件。

  • target 的值为 inner 组件,即最终触发事件的具体子组件。

  1. 在 handleTap 中(第二次触发):
  • currentTarget 的值为 outer 组件,即绑定了事件的最外层组件。

  • target 的值为 inner 组件,即最终触发事件的具体子组件。

通过以上例子,可以看出:

在 catchtap 事件中,无论是 currentTarget 还是 target 的值都是触发事件的具体子组件。

在普通的事件处理函数中,currentTarget 表示的是绑定了事件的组件,而 target 表示的是最终触发事件的具体子组件。

这种区别对于事件的冒泡和捕获阶段非常关键。在复杂的业务中,您可以利用 currentTarget 和 target 来准确地处理不同层级或嵌套组件的事件,并根据业务需要进行逻辑处理。

目录
相关文章
|
8月前
|
小程序 JavaScript
小程序中的数据双向绑定和Vue的有什么区别
小程序中的数据双向绑定和Vue的有什么区别
|
8月前
|
存储 小程序
微信小程序的bindtap和catchtap的区别
微信小程序的bindtap和catchtap的区别
141 0
|
8月前
|
小程序 JavaScript 前端开发
小程序wx:if 和hidden的区别?
小程序wx:if 和hidden的区别?
|
8月前
|
移动开发 小程序 安全
【个人小程序和企业小程序的区别】
【个人小程序和企业小程序的区别】
125 0
|
8月前
|
小程序
小程序wx:if和hidden的区别?
小程序wx:if和hidden的区别?
|
8月前
|
小程序 JavaScript
小程序bindtap 和 catchtap 的区别以及如何使用
小程序bindtap 和 catchtap 的区别以及如何使用
189 0
|
4月前
|
小程序 前端开发 中间件
ThinkPHP 配置跨域请求,使用TP的内置跨域类配置,小程序和web网页跨域请求的区别及格式说明
本文介绍了如何在ThinkPHP框架中配置跨域请求,使用了TP内置的跨域类`\think\middleware\AllowCrossDomain::class`。文章还讨论了小程序和web网页在跨域请求格式上的区别,并提供了解决方案,包括修改跨域中间件源码以支持`Origin`和`token`。此外,还介绍了微信小程序跨域请求的示例和web网页前端发送Axios跨域请求的请求拦截器配置。
ThinkPHP 配置跨域请求,使用TP的内置跨域类配置,小程序和web网页跨域请求的区别及格式说明
|
5月前
|
小程序 前端开发 JavaScript
小程序中wx:if 和hidden的区别
在微信小程序中,wx:if和hidden都是用于控制元素显示与隐藏的方法,但它们在工作原理和性能上存在显著差异。
118 3
|
6月前
|
XML Java 数据格式
支付系统----微信支付20---创建案例项目--集成Mybatis-plus的补充,target下只有接口的编译文件,xml文件了,添加日志的写法
支付系统----微信支付20---创建案例项目--集成Mybatis-plus的补充,target下只有接口的编译文件,xml文件了,添加日志的写法
|
8月前
|
JavaScript 小程序 前端开发
小程序和vue写法的区别
小程序和vue写法的区别
68 1