event.target

This property of event objects is the object the event was dispatched on. It is different than event.currentTarget when the event handler is called in bubbling or capturing phase of the event.

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 identifies the element on which the event occurred.

读定义总是很绕,要彻底了解这两者的区别,我们要先了解浏览器中事件传递的机制冒泡捕获

冒泡和捕获

在页面中点击一个元素,事件是从这个元素的祖先元素中逐层传递下来的,这个阶段为事件的捕获阶段。当事件传递到这个元素之后,又会把事件逐成传递回去,直到根元素为止,这个阶段是事件的冒泡阶段。

 

我们为一个元素绑定一个点击事件的时候,可以指定是要在捕获阶段绑定或者换在冒泡阶段绑定。 当addEventListener的第三个参数为true的时候,代表是在捕获阶段绑定,当第三个参数为false或者为空的时候,代表在冒泡阶段绑定。

知道事件有这么一个穿透的过程之后,结合下面的例子,就可以很好来理解event.targetevent.currentTarget

<div id="a">
<div id="b">
<div id="c">
<div id="d"></div>
</div>
</div>
</div> <script>
document.getElementById('a').addEventListener('click', function(e) {
console.log('target:' + e.target.id + '&currentTarget:' + e.currentTarget.id);
});
document.getElementById('b').addEventListener('click', function(e) {
console.log('target:' + e.target.id + '&currentTarget:' + e.currentTarget.id);
});
document.getElementById('c').addEventListener('click', function(e) {
console.log('target:' + e.target.id + '&currentTarget:' + e.currentTarget.id);
});
document.getElementById('d').addEventListener('click', function(e) {
console.log('target:' + e.target.id + '&currentTarget:' + e.currentTarget.id);
});
</script>

上面事件的绑定都是在冒泡阶段的,当我们点击最里层的元素d的时候,会依次输出:

target:d&currentTarget:d
target:d&currentTarget:c
target:d&currentTarget:b
target:d&currentTarget:a

从输出中我们可以看到,event.target指向引起触发事件的元素,而event.currentTarget则是事件绑定的元素,只有被点击的那个目标元素的event.target才会等于event.currentTarget

如果我们把事件都绑定在捕获阶段,然后还是点击最里层的元素d,这时event.target还依旧会指向d,因为那是引起事件触发的元素,因为event.currentTaget指向事件绑定的元素,所以在捕获阶段,最先来到的元素是a,然后是b,接着是c,最后是d。所以输出的内容如下:

target:d&currentTarget:a
target:d&currentTarget:b
target:d&currentTarget:c
target:d&currentTarget:d

JS

event.target 和 event.currentTarget 的区别的更多相关文章

  1. 【前端】event.target 和 event.currentTarget 的区别

    event.target 和 event.currentTarget 的区别 举例说明: <!DOCTYPE html> <html> <head> <tit ...

  2. e.target与e.currentTarget的区别,事件冒泡与事件捕获 ,事件委托

    e.target与e.currentTarget的区别:https://www.jianshu.com/p/1dd668ccc97a 事件冒泡与事件捕获 :https://www.jianshu.co ...

  3. event.target和event.currentTarget区别

    首先本质区别是: event.target返回触发事件的元素 event.currentTarget返回绑定事件的元素

  4. Event.target和Event.currentTarget的区别

    <style> * { margin:0; padding:0; list-style:none; } #ul { width:400px; height:250px; margin:0 ...

  5. event.target和event.currentTarget的区别----0605加深理解

    target:触发事件的元素.currentTarget:事件绑定的元素.两者在没有冒泡的情况下,是一样的值,但在用了事件委托的情况下,就不一样了,例如: <ul id="ulT&qu ...

  6. JavaScript Event Delegation, and event.target vs. event.currentTarget

    原文:https://medium.com/@florenceliang/javascript-event-delegation-and-event-target-vs-event-currentta ...

  7. js中event.target和event.srcElement的区别

    看了很多资料绝对结果就是 firefox 下的 event.target = IE 下的 event.srcElement jquery中的event.target属性的作用是获取到出发事件的元素.j ...

  8. e.target与e.currentTarget的区别

    在DOM事件对象中有两个属性总是时不时的困扰我,就是target和currentTarget,有时候很迷惑分不清两者的区别,因此有必要把这两个属性好好梳理一下,加深理解,以便日后的查询. MDN中对t ...

  9. 捕获当前事件作用的对象event.target和event.srcElement

    语法: //返回事件的目标节点(触发该事件的节点). event.target //FF,Chrome event.srcElement //IE 栗子: var oDiv=document.getE ...

随机推荐

  1. wiki中文语料的word2vec模型构建

    一.利用wiki中文语料进行word2vec模型构建 1)数据获取 到wiki官网下载中文语料,下载完成后会得到命名为zhwiki-latest-pages-articles.xml.bz2的文件,里 ...

  2. python 线程/线程锁/信号量

    单线程 #常规写法 import threading import time def sayhi(num): # 定义每个线程要运行的函数 print("running on number: ...

  3. ACM-ICPC 2018 徐州赛区网络预赛 G Trace(思维+set)

    https://nanti.jisuanke.com/t/31459 题意 n个矩阵,不存在包含,矩阵左下角都在(0,0),给右上角坐标,后来的矩阵会覆盖前面的矩阵,求矩阵周长. 分析 set按照x或 ...

  4. 第二节: 比较EF的Lambda查询和Linq查询写法的区别

    简介 在前面EF的介绍中,曾多次提到过EF可以使用Lambda和Linq来完成对数据库的访问,这两种的语法的具体使用和注意事项在前面的DotNet进阶的系列章节中已经详细介绍过了,本次借着EF章节,重 ...

  5. 使用ArcMap做一个1:5000标准分幅图并编号

    实现这个project,十进制度.渔网工具.Excel if/Text函数.挂接Excel表.空间连接.投影这些知识是必须的.看懂本篇博文也就意味着大概掌握了以上知识. 坐标数据设置与编号标准依据&l ...

  6. 070、如何定制Calico 网络policy(2019-04-15 周一)

    参考https://www.cnblogs.com/CloudMan6/p/7552618.html     Calico默认的policy是:容器只能与同一个calico网络中的容器通信.   Ca ...

  7. Karma (Test runner)

    Karma https://baike.baidu.com/item/%E7%BE%AF%E7%A3%A8/7618552?fromtitle=Karma&fromid=878453 1,意译 ...

  8. 异常捕获try----catch

    如果try语句里有return,返回的是try语句块中变量值. 详细执行过程如下: 如果有返回值,就把返回值保存到局部变量中: 执行jsr指令跳到finally语句里执行: 执行完finally语句后 ...

  9. 二进制中连续k个1-题解

    原题传送门[>XJOI<]    重要提示:您的等级必须达到三级五段,否则会被一只小猫痛扁 题目描述: 求最小的m,使得m>=n而且m的二进制表示包含至少连续k个1 输入格式: 输入 ...

  10. 【转】使用keepalived设置虚拟IP示例

    准备 准备两台机器,IP地址信息如下: host1: 192.168.56.103 host2: 192.168.56.104 为了测试需要,分别在两台机器上安装apache并启动httpd服务,使下 ...