target与currentTarget两者既有区别，也有联系，那么我们就来探讨下他们的区别吧，一个通俗易懂的例子解释一下两者的区别：

 <!DOCTYPE html>

 <html>

 <head>

     <title>Example</title>

 </head>

 <body>

     <div id="A">

         <div id="B">

         </div>

     </div>

 </body>

 </html>
var a = document.getElementById('A'),

      b = document.getElementById('B');

function handler (e) {

    console.log(e.target);

    console.log(e.currentTarget);

}

a.addEventListener('click', handler, false);

当点击A时：输出：

 <div id="A">...<div>

 <div id="A">...<div>

当点击B时：输出：

 <div id="B"></div>

 <div id="A">...</div>

也就是说，currentTarget始终是监听事件者，而target是事件的真正发出者。

由于要兼容IE浏览器，所以一般都在冒泡阶段来处理事件，此时target和currentTarget有些情况下是不一样的。

如：

 function(e){

     var target = e.target || e.srcElement;//兼容ie7,8

     if(target){

         zIndex = $(target).zIndex();

     }

 }

 //往上追查调用处

 enterprise.on(img,'click',enterprise.help.showHelp);

IE7-8下使用$(target).zIndex();可以获取到 
IE7-8下使用$(e.currentTarget).zIndex();获取不到，可能是IE下既没有target，也没有currentTarget

再来证实一下猜测，在IE浏览器下运行以下代码：

 <input type="button" id="btn1" value="我是按钮" />

 <script type="text/javascript">

     btn1.attachEvent("onclick",function(e){

         alert(e.currentTarget);//undefined

         alert(e.target);       //undefined

         alert(e.srcElement);   //[object HTMLInputElement]

     });

 </script>

对象this、currentTarget和target

在事件处理程序内部，对象this始终等于currentTarget的值，而target则只包含事件的实际目标。如果直接将事件处理程序指定给了目标元素，则this、currentTarget和target包含相同的值。来看下面的例子：

 var btn = document.getElementById("myBtn");

 btn.onclick = function (event) {

     alert(event.currentTarget === this); //ture

     alert(event.target === this); //ture

 };

这个例子检测了currentTarget和target与this的值。由于click事件的目标是按钮，一次这三个值是相等的。如果事件处理程序存在于按钮的父节点中，那么这些值是不相同的。再看下面的例子：

 document.body.onclick = function (event) {

     alert(event.currentTarget === document.body); //ture

     alert(this === document.body); //ture

     alert(event.target === document.getElementById("myBtn")); //ture

 };

当单击这个例子中的按钮时，this和currentTarget都等于document.body，因为事件处理程序是注册到这个元素的。然而，target元素却等于按钮元素，以为它是click事件真正的目标。由于按钮上并没有注册事件处理程序，结果click事件就冒泡到了document.body，在那里事件才得到了处理。

在需要通过一个函数处理多个事件时，可以使用type属性。例如：

 var btn = document.getElementById("myBtn");

 var handler = function (event) {

         switch (event.type) {

         case "click":

             alert("Clicked");

             break;

         case "mouseover":

             event.target.style.backgroundColor = "red";

             bread;

         case "mouseout":

             event.target.style.backgroundColor = "";

             break;

         }

     };

 btn.onclick = handler;

 btn.onmouseover = handler;

 btn.onmouseout = handler;

如果对本文有任何意见和建议，欢迎留言，有错误请指出，谢谢！！！

探讨e.target与e.currentTarget的更多相关文章

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

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

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

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

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

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

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

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

  5. e.target与e.currentTarget对比

    复制以下代码,即可查看效果 <!DOCTYPE html> <html> <head lang="en"> <meta charset=& ...

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

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

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

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

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

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

  9. 小程序获取自定义属性之e.target与e.currentTarget

    彻底弄懂小程序e.target与e.currentTarget 一.小程序中关于事件对象  e  的属性中有两个特别重要的属性:target与currentTarget属性:对于这两个属性,官方文档上 ...

随机推荐

  1. C#系列之｛流和序列化｝

    不论何种类型的文件都可以表示为一个字节数组.(Byte[]) 一.文件复制 (示例) 首先建立一个类似管道的东西将文件和内存中的程序连接,并将文件按字节发送.为了保存接收到的文件字节,需要创建一个字节 ...

  2. Java读取修改Properties文件

    properties文件是我们经常需要操作一种文件,它使用一种键值对的形式来保存属性集. 无论在学习上还是工作上经常需要读取,修改,删除properties文件里面的属性. 本文通过操作一个prope ...

  3. hdu 5090 数列贪心加成1~n

    http://acm.hdu.edu.cn/showproblem.php?pid=5090 给一段长度为n数列,问能否给任意个数加上k的倍数,使得加完之后恰好只有1~n 贪心,先排序,依次加出1~n ...

  4. Miller_raibin算法随机化检测素数 & Pollar_rho 算法分解大数

    这几天一直再学习这些内容,也没有发一些博客,现在我觉得差不多了 首先基础是Miller_raibin随机化检测素数,顾名思义,随机化也就是有几率不对,但是很低,适用于大数快速检测,因为大数已经超出了我 ...

  5. hive 动态分区与混合分区

    hive的分区概念,相信大家都非常了解了.通过将数据放在hdfs不同的文件目录下,查表时,只扫描对应分区下的数据,避免了全表扫描. 提升了查询效率. 关于hive分区,我们还会用到多级分区.动态分区. ...

  6. Java学习---- 数组的引用传递

    1. public class ArrayRefDemo01{ public static void main(String args[]){ int temp[] = {1,3,5} ; // 利用 ...

  7. Spring Boot 2 启动时加载properties文件

    每个项目从开发到测试再到上线所需要的各种环境是不同的,这就需要维护相应的配置文件,比如properties或yml文件.有了配置文件后就要考虑如何与应用进行集成. 对于云环境来讲,项目发布需要打成镜像 ...

  8. fping常用参数介绍

    fping的主要参数有以下两个: -a:只显示存活主机: -u:只显示不存活主机: -l:循环ping目标IP地址的输入方式: fping IP1 IP2 IP3 ...: fping -f file ...

  9. Asp .Net core 2 学习笔记(1) —— Starup

    这个系列的初衷是便于自己总结与回顾,把笔记本上面的东西转移到这里,态度不由得谨慎许多,下面是我参考的资源: ASP.NET Core 中文文档目录 官方文档 记在这里的东西我会不断的完善丰满,对于文章 ...

  10. C#项目 学生选课系统 C#窗口 Winform项目 项目源码及使用说明

    这是一个学生选课信息管理系统,使用VS2010+SQL2008编写,VS2017正常使用. 项目源码下载地址 https://gitee.com/whuanle/xkgl 笔者录了两个视频,打开项目源 ...