JavaScript target与currentTarget区别

最新推荐文章于 2022-11-25 15:24:33 发布
最新推荐文章于 2022-11-25 15:24:33 发布
阅读量66 收藏
点赞数
文章标签： javascript ViewUI

1、DOM事件绑定到父元素

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>target 与 currentTarget</title>
    </head>

    <body>
        <ul id="ul">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <script type="text/javascript">
            var ul = document.getElementById('ul');
            ul.onclick = function(e) {
                console.log(this); //ul DOM节点
                console.log(this === e.target); // click 事件真正的目标 false
                console.log(this === e.currentTarget); //在事件处理程序内部，对象 this 始终等于 currentTarget 的值 返回ture
            }
        </script>
    </body>

</html>

2、DOM事件绑定到本身DOM上

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>target 与 currentTarget</title>
    </head>

    <body>
        <ul id="ul">
            <li id="li">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <script type="text/javascript">
            var li = document.getElementById('li');
            li.onclick = function(e) {
                console.log(this); //li DOM节点
                console.log(this === e.target); // click 事件真正的目标 true
                console.log(this === e.currentTarget); //在事件处理程序内部，对象 this 始终等于 currentTarget 的值 返回ture
            }
        </script>
    </body>

</html>

总结：

（1）事件内部的this就是绑定事件的那个DOM

（2）事件处理程序内部，对象 this 始终等于 currentTarget 的值。

（3）事件处理程序内部，target 的值是实际触发事件的真正DOM（如父节点绑定事件，其实子节点触发的事件）

 

更新2019.1.3 

上面说的真晦涩！

示例代码：

 

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>target 和 currentTarget 区别</title>
    </head>

    <body>
        <div id="app1">
            <div id="app2">
                <div id="app3">
                    test
                </div>
            </div>
        </div>
        <script type="text/javascript">
            let app1 = document.getElementById('app1'),
                app2 = document.getElementById('app2'),
                app3 = document.getElementById('app3');
            app1.addEventListener('click', e => {
                console.log(e.target, 'e.target')
                console.log(e.currentTarget, 'e.currentTarget')
            })
        </script>
    </body>

</html>

 

效果：

 

 看明白了没？

这个的使用场景是：事件代理。

真正触发事件的dom是target

可以将事件代理到currentTarget上。

weixin_34249367
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS target与currentTarget区别说明
10-28
target在事件流的目标阶段；...只有当事件流处在目标阶段的时候，两个的指向才是一样的，而当处于捕获和冒泡阶段的时候，target指向被单击的对象而currentTarget指向当前事件活动的对象（一般为父级）。
JavaScript - ----target和this的区别
weixin_45904557的博客
06-08 372
我们可以通过js修改元素的大小,颜色,位置等样式 🍓. 🐇. 1.element.style 行内样式操作 2.element.className 类名样式操作
关于JS中target属性
热门推荐
Aurora_Nil的博客
04-01 1万+
关于JS中target属性的使用 首先先介绍一下target这个属性——触发事件的元素 定义和语法 //定义 target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素 //语法 event.target 小结：event.target可以理解为我们当下操作的这个对象，我们通过点击、键盘事件、change等等操作来触发target(理解深度不够 以后会继续完善) 可以不使用for()循环或者数组forEach()去判断我点击或者我需要找的是哪个元素，直接使用target点击就可获取
【JavaScript】——JavaScript基础之e.target和this的区别
qq_50497708的博客
11-25 428
target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。由此我们会看到，二者输出一致，那么区别是什么呢？target 属性规定哪个 DOM 元素触发了该事件。this是哪个元素绑定了这个事件，那么就返回哪个元素。e.target点击了哪个元素，就返回哪个元素；图中的e一定要有，有了这个。e.target事件属性。e.target表示。
javascript事件处理二 事件对象event详解及target和currentTarget区别
ScottePerk的博客
11-09 1198
在处理事件的时候，所有和事件相关的东西都封装到event这个对象里面。所以这个对象非常的重要。这个对象有非常多的内容，我们讨论几个计较常见和以及比较难区别的target和currentTarget。
简单几句话彻底理解Javascript中target与currentTarget的区别
胡聊前端的博客
10-20 3439
Javascript中target与currentTarget的区别是老生常谈的问题。尤其是作为面试题可以考察应聘者对于JS事件的理解。 JS中的事件触发是一个过程，即 捕获阶段→目标阶段→冒泡阶段 捕获阶段\rightarrow 目标阶段\rightarrow 冒泡阶段 捕获阶段→目标阶段→冒泡阶段 DOM是嵌套的，触发内部元素的之前会先再捕获阶段触发外部元素，之后在冒泡阶段再次触发外部元素。 故当外部元素的事件被触发，当前的元素就对应了currentTarget，而最终目标元素就是target。 cur
Javascript中, event 的 target 与 currentTarget 的区别
04-10
NULL 博文链接：https://rainbow702.iteye.com/blog/1668953
event.currentTarget与event.target的区别介绍
12-12
event.currentTarget identifies the current target for the event, as the event traverses the DOM. It always refers to the element the event handler has been attached to as opposed to event.target which...
微信小程序中target和currentTarget的区别小结
01-18
在小程序中，e.target与e.currentTarget是非常重要的，尤其是涉及到页面传值时 currentTarget和target都是组件的一些属性值集合，由“data-属性名”定义的一些属性值 currentTarget：事件触发的当前事件（当前事件，...
JS中target属性的使用
m0_48982503的博客
10-09 2414
前言： 最近学习了target属性，是真的强大，可以不使用for()循环或者数组forEach()去判断我点击或者我需要找的是哪个元素，直接使用target点击就可获取。 接下来说说target哪里强大。 先看看target是什么意思。 target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口 <ul> <li>生日快乐</li> <li>生日快乐</li>
JavaScript中的Event.target
qq_54334713的博客
04-26 6760
event.target 一般情况下我们获取目标事件源都是谁是调用者谁就是事件源，但是当有批量的DOM需要操作的时候，要判断哪一个dom是事件源就不是很明确了，使用e.target可以准确地获取事件源，并且在使用的过程中可以比较判断，从而实现我们的代码。 举个例子：当做一个拖拽的案例的时候，有多个事件源，但是想要知道鼠标点击的是不是我们想要的事件源的时候（例如：其他区域和事件源进行判断），我们就可以使用e.target，比较获取的事件源的Id,classname，nodename... 白话就是：用
js中Event 对象 target 与 currentTarget的应用
zjl516088421的博客
09-04 1358
Event 对象 Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。 事件通常与函数结合使用，函数不会在事件发生前被执行！ 重点应用 target 与 currentTarget 当一个div内包括了img、p、span 等多个标签，且div 绑定有事件，点击div内部触发
js 框架页面跳转(target)
cc_yy_zh的博客
12-22 3150
1.跳出框架，在父页面。 <script language="javascript"> window.parent.frames.location.href="../welcome.en" </script>2.从一个框架跳转到 name="main" 的框架里<script language="javascript"> var key = document.getElementById("
JavaScript target 和 currentTarget 区别
ximengyun的专栏
05-22 984
target(IE下为scrElement)：在W3cschool中解释为：返回触发此事件的元素，（事件的目标节点），意思就是说是哪个HTML元素触发了这个事件。 currentTarget：在W3cschool中解释为：返回其事件监听器触发该事件的元素，意思是当前事件发生在哪个元素 function doSomething(e) { if (!e)
JavaScript核心之事件详解（EventTarget接口，js事件传播，Event对象）
上善若泪
05-03 4223
目录 1 EventTarget接口 1.1 addEventListener() 1.1.1 addEventListenerthis对象的指向 1.2 removeEventListener() 1.3 dispatchEvent() 2 监听函数 2.1 HTML标签的on-属性 2.2 Element节点的事件属性 2.3addEventListener方法 3 事件...
javascript event.target 和 event.currentTarget
zhulongxi的博客
08-31 1489
1、target发生在事件流的目标阶段，而currentTarget发生在事件流的整个阶段（捕获、目标和冒泡阶段） 2、只有当目标流处于目标阶段的时候才相同 3、而当事件流处于捕获和冒泡阶段时，target指向被点击的对象，而currentTarget指向当前事件活动的对象，通常是事件的祖元素。 用最简单的语言总结： target: 代表当前目标对象（事件作用的对象） currentTa
Javascript里的EventTarget的规范及应用
不积跬步无以至千里，不积小流无以成江海
02-21 3274
"EventTarget is a DOM interface implemented by objects that can receive DOM events and have listeners for them." 一个EventTarget是一个可以接受DOM事件且能绑定事件监听器的对象.最常见的EventTarget就是DOM元素对象,另外,还有一些不是DOM元素的对象也能成为
target 和currentTarget的区别
最新发布
04-27
在 JavaScript 中，当一个事件被触发时，通常会有两个属性与之相关，它们分别是target和currentTarget。 target属性指向触发事件的元素，而currentTarget则指向当前事件处理程序所附加的元素。 例如，当一个按钮被...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值