e-target与e-currentTarget的区别

最新推荐文章于 2023-10-26 14:38:21 发布
原创 最新推荐文章于 2023-10-26 14:38:21 发布 · 184 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #小程序

本文通过具体代码示例，详细解析了在WXML事件处理中e.target与e.currentTarget的区别，探讨了它们在事件委托机制中的作用，以及如何正确使用这两个属性来获取预期的数据。

e.target与e.currentTarget的区别

先贴上代码

          <view wx:if="{{useSpecialDelivery}}" class="h-v3">
                <view class="h-v3-1-detail">
                    <view ><icon class="iconfont icon-home-waimai home-icon"></icon></view>
                    <view wx:if="{{takeOutFoodButton}}" catchtap="preOrder" data-dinnerType='1' data-tradeTypeCode='2'>
                        <view>无接触配送</view>
                        <image src='{{homeImages}}'wx:if="{{takeOutFoodButton &&!tangShiFoodButton}}" class="homeImages"></image>
                        <view style="line-height:55rpx">外卖点餐</view>
                        <view>家庭厨房/美味自煮</view>
                    </view>

                    <view class="h-v3-1-hr" wx:if="{{tangShiFoodButton && takeOutFoodButton}}"></view>

                    <view catchtap="preOrder" data-dinnerType='2' data-tradeTypeCode='1' wx:if="{{tangShiFoodButton}}" class="h-v3-1-item-title h-v3-1-item-title-detail title-right">
                        <view class="h-v3-1-item-title-tip item-title-tip-right">无接触点取</view>
                        <image src='{{homeImages}}' wx:if="{{tangShiFoodButton &&!takeOutFoodButton}}" class="homeImages" data-dinnerType='2' data-tradeTypeCode='1'></image>
                        <view style="line-height:55rpx" data-dinnerType='2' data-tradeTypeCode='1'>堂食点餐</view>
                        <view class="statement" data-dinnerType='2' data-tradeTypeCode='1'>店内就餐/打包带走</view>
                    </view>
                     <view catchtap="preOrder" data-dinnerType='2' data-tradeTypeCode='1'><icon class="iconfont icon-home-store home-icon" style="font-size:62rpx !important"></icon></view>
                </view>
            </view>

preOrder () {
    //点击上方的外卖点餐的文字,没有 data-$value
    //e.target.dataset 是个 {}; 而e.currentTarget.dataset 拥有预期的值
    //点击上方的堂食点餐的文字
    //e.target.dataset 拥有预期值，因为加上了data-$value; 而e.currentTarget.dataset 拥有预期的值
    //catch事件和target这个特性来进行事件委托
}

参考链接： https://www.jianshu.com/p/1dd668ccc97a

typeSctipt入门系列 - 1配置开发环境
JSON_a的博客
03-27 329
这次的目标是 使用typeScript实现一个hello world 其中包括了 webpack配置项的详细讲解(在build目录下的各个js文件中都有注释) 主要搭建了webpack + typeScript的环境, 后期的代码都会基于此工程进行开发 gitee项目地址 一、准备环境 给电脑安装node环境 (http://nodejs.cn/),可直接通过官网下载安装 全局安装 typeSc...
data-属性，e.target与e.currentTarget
tsj161616的博客
07-06 497
按我自己目前理解就是绑定事件，e.target获取绑定事件里面元素的data-属性，e.currentTarget就是该绑定事件这个元素的data-属性。资料，设计到事件机制。
e.target 和 e.currentTarget 的区别？
huangzhin的博客
04-24 615
e.target 和 e.currentTarget 的区别
e.target 与 e.currentTarget
JDDDDDDyaya的博客
11-07 278
e.currentTarget === this e.target === 你点击的元素，你点击的是谁，e.target 就是谁 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
e.target与e.currentTarget的区别
Sfh的博客
10-09 633
起初是在微信小程序的项目中发现了这样一段代码: <label data-url="../logs/logs" bindtap="debug">调试按钮</label> debug: function(e) { console.log(e); let url = e.target.dataset.url; wx.navigateTo({ url: url, }); }, 然后打开调试器看到e对象的结构发现此时target和curren
前端笔记 e.target与e.currentTarget
doiido的专栏
10-26 286
MDN中对target的解释为，一个触发事件的对象的引用， 当事件处理程序在事件的冒泡或捕获阶段被调用时。而对于currentTarget，它指的是当事件遍历DOM时，标识事件的当前目标。它总是引用事件处理程序附加到的元素，而不是，它标识事件发生的元素。
JS - e.target 和 e.currentTarget 的区别
Allurewuhui的博客
02-06 884
e.currentTarget 指向捕获事件的对象； e.target 指向发生这个事件的对象； e.target 返回的是点击的当前元素，而 e.currentTarget 返回的是包括父元素和子元素在内的整体。
e.target和e.currentTarget
qq_41588568的博客
04-26 458
先描述遇到的问题： 我的html代码和js代码分别如下： 第一：div就是每一个菜单的容器，里边的<b></b>标签内存放的是菜单的内容 第二：注意我的点击事件是在div上 这是我修改后的代码，在我修改之前，我使用的是e.target，而这样的情况下，我点击菜单时候，如果点到的是菜单的内容，背景颜色就不会改变，只有鼠标点击到div元素的上边，才会发...
e.target和e.currentTarget的区别
qq_50386946的博客
04-03 148
【代码】e.target和e.currentTarget的区别。
e.target 和 e.currentTarget 的区别
weixin_46821141的博客
03-21 1123
e.target 是触发事件的元素。 e.currentTarget 是绑定事件的元素。 注意： e.currentTarget 浏览器控制台输出可能为 null，这个没有影响，直接使用就好 在线代码示例：e.target 和 e.currentTarget的区别 - JSRUN.NET ...
简单了解微信小程序 e.target与e.currentTarget的不同
10-16
总的来说，`e.target`与`e.currentTarget`在微信小程序的事件处理中扮演着关键的角色，它们帮助开发者区分事件的来源和当前处理事件的元素，使得事件处理更加灵活和强大。掌握这两者的区别对于编写高效且正确的事件...
微信小程序事件对象中e.target和e.currentTarget的区别详解
10-17
总结来说，e.target和e.currentTarget的区别主要体现在它们分别表示了事件触发的源头和事件处理函数绑定的目标。e.target可以动态变化，根据点击的位置不同而指向不同的元素；e.currentTarget则是固定的，它指向的是...
简历怎么写
JSON_a的博客
03-19 2785
简历是你进入面试的敲门砖，也是留给意向公司的第一印象，所以这个很重要，必须在这上面做足了文章，一份优秀的面试简历是整个面试成败的重中之重，我们会详细分析如何准备简历才能保证简历不被刷掉。 准备专业技能 关于对技术技能的描述有很多种，有五种的也有三种的，而且每个人对词汇的理解都不一样，我结合相关专家的理解和自己的理解来简单阐述下描述词汇的区别，我们这里只讲三种的了解、熟悉、精通。 了解：使用过某一...
javascript中获取时间戳的几种方式
JSON_a的博客
03-18 814
获取时间戳的方法 使用 new Date().getTime()获取当前时间戳 new Date().getTime(); //1580797340236 Date.valueOf() 此方法返回一个 Date 对象的原始值。 const date1 = new Date(Date.UTC(96, 1, 2, 3, 4, 5)); console.log(date1.va...
支付宝和微信的差异(持续更新)
JSON_a的博客
03-19 369
支付宝小程序 支付宝的根节点不是 page 标签, 但是可以用全局的一个类名进行代替 支付宝的支付 api 和微信有差异 支付宝只要吊起弹窗即触发成功回调(微信支付成功才算成功); 成功回调有 res 参数, code === 9000 表示付款成功 _my.requestPayment({ ...payMentParam, success: res1 => { co...
聊一聊Chrome下V8引擎的垃圾回收机制
JSON_a的博客
09-28 358
1. javaScript的内存管理 像C语言这样的底层语言一般都有底层的内存管理接口，比如 malloc()和free()。 相反，JavaScript是在创建变量（对象，字符串等）时自动进行了分配内存，并且在不使用它们时“自动”释放。 释放的过程称为垃圾回收。这个“自动”是混乱的根源，并让JavaScript（和其他高级语言）开发者错误的感觉他们可以不关心内存管理。 无论什么语言内存的生命周期基本是一致的： 1. 分配你所需的内存 2. 使用分配到的内存读/写 3. 再不需要时将其回收/释放 所有语言第
变量对象
JSON_a的博客
03-18 338
当 JavaScript 遇到可执行代码时，都会创建执行上下文。 每个执行上下文都有三个重要属性 变量对象（Variable object，VO) 作用域链(Scope chain) this 变量对象是与执行上下文相关的作用域，定义了在上下文中的变量和函数声明。 因为不同执行上下文下的变量对象稍有不同，所以我们来聊聊全局上下文下的变量对象和函数上下文下的变量对象。 原文链接 全局上下文： ...
如何参与GitHub开源项目
JSON_a的博客
03-19 316
怎样做选择 选择你的第一个issues 一旦你选择好了一个开源项目，你需要找到一种开始的方式。 有时候，你会对一些需要改变的问题有强烈的的看法。其他时候，你可能只是希望帮助团队解决一个炙手可热的 issue。 如果您所做的不是修复一个单词错误或让demo正确编译，那么确实应该在他们的GitHub项目中为您将要进行的工作创建一个 issue。 提issue的好处：这可以确保您的工作是需要的，并...
每日笔记
JSON_a的博客
05-28 309
2019年3月 a.html 24日 mpvue+vuex实现全局状态管理 mpvue+vuex本地小程序的搭建 2019年3月25日 微信小程序连接蓝牙设备(卡在搜索不到另外一台手机的蓝牙信息,iOS搜索安卓) vue-router实现原理(三种路由模式)https://segmentfault.com/a/1190000018584560 westore 全局状态管理,以及父子组件传值 ...
e.target和e.currentTarget有什么区别
最新发布
07-23
<think>我们正在讨论事件处理中的两个重要属性：e.target 和 e.currentTarget。 在事件冒泡或捕获过程中，这两个属性代表不同的DOM节点。 简单来说： - e.target：指的是触发事件的原始元素（即事件最初发生的元素）。 - e.currentTarget：指的是当前正在处理该事件的元素（即绑定事件处理程序的元素）。 下面用代码示例和详细解释来说明。</think>### `e.target` 与 `e.currentTarget` 的区别详解 在 JavaScript 事件处理中，`e.target` 和 `e.currentTarget` 都是事件对象的重要属性，但它们代表不同的元素： #### 核心区别 | 属性 | 指向对象 | 是否变化 | 典型使用场景 | |------|----------|----------|--------------| | **`e.target`** | 实际触发事件的元素 | ❌ 固定不变 | 事件委托中识别实际触发元素 | | **`e.currentTarget`** | 当前处理事件的元素 | ✅ 随事件传播变化 | 访问绑定事件处理程序的元素 | --- ### 代码示例与解释 ```html <div id="parent"> <button id="child">点击我</button> </div> <script> const parent = document.getElementById('parent'); const child = document.getElementById('child'); parent.addEventListener('click', function(e) { console.log('target:', e.target.id); // 输出: child console.log('currentTarget:', e.currentTarget.id); // 输出: parent // 验证关系 console.log(e.target === child); // true console.log(e.currentTarget === parent); // true console.log(e.currentTarget === this); // true (在普通函数中) }); </script> ``` #### 执行结果： ``` target: child currentTarget: parent true true true ``` --- ### 详细说明 #### 1. **`e.target`** - **定义**：事件发生的**实际目标元素**（最深层元素） - **特点**： - 始终指向最初触发事件的元素 - 在事件传播过程中保持不变 - **使用场景**： ```javascript // 事件委托：在父元素处理子元素事件 document.querySelector('ul').addEventListener('click', (e) => { if(e.target.tagName === 'LI') { console.log('点击了列表项:', e.target.textContent); } }); ``` #### 2. **`e.currentTarget`** - **定义**：当前正在处理事件的元素 - **特点**： - 随事件传播阶段变化（捕获 → 目标 → 冒泡） - 在事件处理函数中等于 `this`（箭头函数除外） - **使用场景**： ```javascript // 访问绑定事件的元素属性 document.querySelectorAll('.btn').forEach(btn => { btn.addEventListener('click', function(e) { // 获取当前按钮的data属性 const action = e.currentTarget.dataset.action; console.log('执行操作:', action); }); }); ``` --- ### 事件传播阶段演示 ```html <div id="grandparent"> <div id="parent"> <div id="child">点击这里</div> </div> </div> <script> const logEvent = (phase) => (e) => { console.log(`${phase}:`); console.log(' target: ${e.target.id}'); console.log(' currentTarget: ${e.currentTarget.id}\n'); }; document.getElementById('grandparent').addEventListener( 'click', logEvent('捕获阶段'), true ); document.getElementById('parent').addEventListener( 'click', logEvent('目标阶段') ); document.getElementById('child').addEventListener( 'click', logEvent('冒泡阶段') ); </script> ``` #### 点击 `<div id="child">` 时的输出： ``` 捕获阶段: target: child currentTarget: grandparent 目标阶段: target: child currentTarget: child 冒泡阶段: target: child currentTarget: parent ``` --- ### 关键注意事项 1. **箭头函数中的 `this`**： ```javascript // 错误示例 button.addEventListener('click', (e) => { console.log(this); // 指向window（不是当前元素） console.log(e.currentTarget); // 正确方式获取当前元素 }); ``` 2. **事件委托模式**： ```javascript // 高效处理动态元素 document.body.addEventListener('click', (e) => { // 使用 target 识别实际点击元素 if(e.target.classList.contains('dynamic-item')) { // 处理逻辑 } }); ``` 3. **嵌套元素场景**： ```html <button id="btn"> <span>点击文字</span> </button> <script> btn.addEventListener('click', (e) => { console.log(e.target.tagName); // 可能是 SPAN console.log(e.currentTarget.tagName); // 总是 BUTTON }); </script> ``` --- ### 总结表格 | 特性 | `e.target` | `e.currentTarget` | |------|------------|-------------------| | 事件目标 | 原始触发元素 | 当前处理元素 | | 事件传播中 | 不变 | 随处理元素变化 | | 等于 `this` | ❌ | ✅（普通函数中） | | 事件委托 | 关键属性 | 较少使用 | | 动态元素 | 有效识别 | 无法识别动态内容 | | 嵌套元素 | 可能指向内部元素 | 始终指向绑定元素 |
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值