探讨e.target与e.currentTarget

时间 2019-11-08

标签探讨 e.target target e.currenttarget currenttarget 繁體版

原文原文链接

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

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>Example</title>
 5 </head>
 6 <body>
 7     <div id="A">
 8         <div id="B">
 9         </div>
10     </div>
11 </body>
12 </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时：输出：html

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

当点击B时：输出：java

1 <div id="B"></div>
2 <div id="A">...</div>

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

因为要兼容IE浏览器，因此通常都在冒泡阶段来处理事件，此时target和currentTarget有些状况下是不同的。函数

如：this

1 function(e){
2     var target = e.target || e.srcElement;//兼容ie7,8
3     if(target){
4         zIndex = $(target).zIndex();
5     }
6 }
7 
8 //往上追查调用处
9 enterprise.on(img,'click',enterprise.help.showHelp);

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

再来证明一下猜想，在IE浏览器下运行如下代码：code

1 <input type="button" id="btn1" value="我是按钮" />
2 <script type="text/javascript"> 
3     btn1.attachEvent("onclick",function(e){
4         alert(e.currentTarget);//undefined
5         alert(e.target);       //undefined
6         alert(e.srcElement);   //[object HTMLInputElement]
7     });
8 </script>

对象this、currentTarget和target htm

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

1 var btn = document.getElementById("myBtn");
2 btn.onclick = function (event) {
3     alert(event.currentTarget === this); //ture
4     alert(event.target === this); //ture
5 };

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

1 document.body.onclick = function (event) {
2     alert(event.currentTarget === document.body); //ture
3     alert(this === document.body); //ture
4     alert(event.target === document.getElementById("myBtn")); //ture
5 };

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

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

 1 var btn = document.getElementById("myBtn");
 2 var handler = function (event) {
 3         switch (event.type) {
 4         case "click":
 5             alert("Clicked");
 6             break;
 7         case "mouseover":
 8             event.target.style.backgroundColor = "red";
 9             bread;
10         case "mouseout":
11             event.target.style.backgroundColor = "";
12             break;
13         }
14     };
15 btn.onclick = handler;
16 btn.onmouseover = handler;
17 btn.onmouseout = handler;

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