微信小程序target和currentTarget的区别

VIP文章 weixin_43364458

已于 2023-03-05 08:50:40 修改

阅读量638

点赞数

分类专栏：微信小程序文章标签： javascript 前端 vue.js

于 2023-03-05 08:14:15 首次发布

本文链接：https://blog.csdn.net/weixin_43364458/article/details/129341956

版权

如果需要理解event.target和event.currentTarget的区别，必须先理解事件传播机制。如下图所示

事件传播机制图示

两者区别

current: 触发事件的元素。比如点击的目标是inner盒子，那么触发事件的元素就是inner盒子，点击的目标是outer盒子，那么触发事件的元素就是outer盒子。
currentTarget: 处理事件的元素。处理事件的元素不是一成不变的，而是根据事件传播机制、是否绑定事件而定的。
如果元素没有嵌套层级关系，那么target和currentTarget没有区别。

最外层元素绑定事件内层元素没有绑定事件情况

冒泡阶段处理事件情况

<view id="outer" class="outer" bindtap="onClickTap" data-money="2000">
 <view id="inner" class="inner"></view>
</view>

//  pages/index/index.js

Page({
   
 onClickTap (event) {
   
   const {
   target,currentTarget} = event
   // target: 触发事件的元素
   // currrentTarget:处理事件的元素
   console.log(target) // inner
   console.log(currentTarget) // outer

   console.log(target<