詳解target與currentTarget的區別

2014-6-25

今天看了jquery手冊，發現jQuery的事件物件模組也有一個currentTarget，總是指向this。

所以結論是：原生的currentTarget與jQuery的currentTarget完全不是一回事。要重點區別對待。

2014-6-17

target與currentTarget的差別？

簡單易懂的說法：

比如說現在有A和B，

A.addChild(B)

A監聽滑鼠點擊事件

那麼當點擊B時，target是B，currentTarget是A

也就是說，currentTarget總是監聽事件者，而target是事件的真正發出者

總結：

target在事件流的目標階段；currentTarget在事件流的捕獲，目標及冒泡階段。只有當事件流處在目標階段的時候，兩個的指向才是一樣的， 而當處於捕獲和冒泡階段的時候，target指向被單擊的對象而currentTarget指向當前事件活動的對象（一般為父級）。

結論：由於要相容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>

第二個地方：

$(element).on('click',jQuery.proxy(this, 'countdownHandler', this.name, this.nameAlert));
function countdownHandler(name, nameAlert){
    var _this = this,
    zIndex = 1999;//获取不到target时的默认值
    if(arguments[2] && arguments[2].currentTarget && $(arguments[2].currentTarget)){
        zIndex = $(arguments[2].currentTarget).zIndex();
        if(zIndex){
            zIndex += 1;
        }else{//获取不到z-index值
            zIndex = 1999;
        }
    }
}

使用$(arguments[2].currentTarget).zIndex();也能取得到

預期結論：後者是使用jquery綁定事件的，jQuery內部讓currentTarget表示當前元素。類似FF/Chrome下的target，和IE下的srcElement。

網路上的範例：

    <p id="outer" style="background:#099">  
        click outer  
        <p id="inner" style="background:#9C0">click inner</p>  
        <br>  
    </p>  
      
    <script type="text/javascript">  
    function G(id){  
        return document.getElementById(id);      
    }  
    function addEvent(obj, ev, handler){  
        if(window.attachEvent){  
            obj.attachEvent("on" + ev, handler);  
        }else if(window.addEventListener){   
            obj.addEventListener(ev, handler, false);  
        }  
    }  
    function test(e){  
        alert("e.target.tagName : " + e.target.tagName + "/n e.currentTarget.tagName : " + e.currentTarget.tagName);  
    }  
    var outer = G("outer");  
    var inner = G("inner");  
    //addEvent(inner, "click", test);  // 两者都是P标签
    addEvent(outer, "click", test);  //结论：当在outer上点击时，e.target与e.currentTarget是一样的，都是p；当在inner上点击时，e.target是p，而e.currentTarget则是p。
    </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;

     

#

以上是詳解target與currentTarget的區別的詳細內容。更多資訊請關注PHP中文網其他相關文章！