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中文網其他相關文章！
