探討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;

若是對本文有任何意見和建議，歡迎留言，有錯誤請指出，謝謝！！！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。