直接上代码:

body里:

   <div id="father">
father
<div id="son">
son
</div>
</div>

js:

<script type="text/javascript">
let fa = document.getElementById('father');
let son = document.getElementById('son');
fa.addEventListener('click', e => {
console.log(e.target)
console.log(e.currentTarget)
})
</script>

运行结果:

点击fa元素:

点击son元素:

结论:

target: 触发事件的对象,谁触发谁命中。

currentTarget: 绑定事件的对象,恒等于this,等于addEventListener前面的元素

 

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

  1. 【小程序】获取到的e.target与e.currentTarget区别

    [小程序]获取到的e.target与e.currentTarget区别:https://blog.csdn.net/qq_33744228/article/details/80310294 使用e.t ...

  2. event.target和event.currentTarget区别

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

  3. 小程序--e.target和e.currentTarget区别

    事件捕获与事件冒泡 事件捕获是从外到内,事件冒泡是从内到外. 注意:不管是不是冒泡事件,都不会改变事件传递的参数值,都还是在dataset中获取(******) target:指事件源组件对象    ...

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

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

  5. event.target 和 event.currentTarget 的区别

    event.target This property of event objects is the object the event was dispatched on. It is differe ...

  6. Event对象中的target属性和currentTarget属性的区别

    先上结论: Event.target:触发事件的元素: Event.currentTarget:事件绑定的元素: 通过下面的例子来理解这两个属性的区别: 使用Event.target属性的例子:(我在 ...

  7. JavaScript target与currentTarget区别

    1.DOM事件绑定到父元素 <!DOCTYPE html> <html lang="zh"> <head> <meta charset=& ...

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

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

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

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

随机推荐

  1. 全面介绍Windows内存管理机制及C++内存分配实例(四):内存映射文件

    本文背景: 在编程中,很多Windows或C++的内存函数不知道有什么区别,更别谈有效使用:根本的原因是,没有清楚的理解操作系统的内存管理机制,本文企图通过简单的总结描述,结合实例来阐明这个机制. 本 ...

  2. .Net Web Api——获取client浏览器信息

    第一次接触到web api,发现这个东西是REST风格的:---- 微软的web api是在vs2012上的mvc4项目绑定发行的.它提出的web api是全然基于RESTful标准的,全然不同于之前 ...

  3. generateScriptFile.py脚本使用过程中遇到的问题及解决

    generateScriptFile.py脚本 #!/usr/bin/env python # -*- coding: utf-8 -*- """ use case: p ...

  4. 单舵轮(叉车)AGV里程计数据解算

    单舵轮(叉车)AGV里程计数据解算 2016-07 单舵轮AGV,一般包含一个驱动轮和两个从动轮,驱动轮是同时具备行走和转向两个功能的舵轮,因此,单舵轮AGV的运动学自由度为2个.舵轮线速度V1,舵轮 ...

  5. PAT 1052 Linked List Sorting [一般]

    1052 Linked List Sorting (25 分) A linked list consists of a series of structures, which are not nece ...

  6. django 增加验证邮箱功能

    在user文件夹下新建python包,utils 在包内新建文件email_send.py,其中包括验证字符串随机码的产生,数据库的存储和email的发送 # -*- coding: utf-8 -* ...

  7. iOS App 上架(Analysis 工具使用)

    随着iOS开发的流行,针对iOS开发涉及的方方面面,早有一些公司提供了专门的解决方案或工具.这些解决方案或工具包括:用户行为统计工具(友盟,Flurry,Google Analytics等), App ...

  8. 07 nginx反向代理和nfs服务

    作业一:nginx服务二进制安装nginx包 作为web服务修改配置文件 让配置生效,验证配置 作业二:nfs服务二进制安装nfs作为共享存储挂载在三台web的网站根目录下实现,在任意一台web上修改 ...

  9. C# 各种导入 Excel 文件的数据的方法总结

    在导入之前都需要将上传的文件保存到服务器,所以避免重复的写这些代码,先贴出上传文件并保存到服务器指定路径的代码. protected void btnImport_Click(object sende ...

  10. Http协议面试题

    1.说一下什么是Http协议? 对器客户端和 服务器端之间数据传输的格式规范,格式简称为“超文本传输协议”. 2.什么是Http协议无状态协议?怎么解决Http协议无状态协议?(曾经去某创业公司问到) ...