微信小程序-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 来准确地处理不同层级或嵌套组件的事件,并根据业务需要进行逻辑处理。

目录
相关文章
|
1天前
|
小程序 JavaScript
小程序中的数据双向绑定和Vue的有什么区别
小程序中的数据双向绑定和Vue的有什么区别
|
1天前
|
存储 小程序
微信小程序的bindtap和catchtap的区别
微信小程序的bindtap和catchtap的区别
|
1天前
|
移动开发 小程序 安全
【个人小程序和企业小程序的区别】
【个人小程序和企业小程序的区别】
25 0
|
1天前
|
小程序 JavaScript 前端开发
小程序wx:if 和hidden的区别?
小程序wx:if 和hidden的区别?
|
1天前
|
小程序
小程序wx:if和hidden的区别?
小程序wx:if和hidden的区别?
|
1天前
|
小程序 JavaScript
小程序bindtap 和 catchtap 的区别以及如何使用
小程序bindtap 和 catchtap 的区别以及如何使用
26 0
|
1天前
|
JavaScript 小程序 前端开发
小程序和vue写法的区别
小程序和vue写法的区别
14 1
|
1天前
|
移动开发 开发框架 小程序
UniApp与微信小程序介绍及区别
UniApp与微信小程序介绍及区别
20 0
|
1天前
|
小程序 JavaScript
Vue和小程序的区别
Vue和小程序的区别
|
1天前
|
移动开发 小程序 前端开发
H5和小程序有什么区别
H5和小程序有什么区别

热门文章

最新文章