addEventListener、attachEvent 和 this 關鍵字

6/18 11'

如果你是為了 IE 的 attachEvent 不能使用 this 關鍵字而來的，試著把 handler 裡的 this 改成 event.srcElement, ex:obj.attachEvent('onfocus',function(){event.srcElement.select();});，然後，快回去趕案子吧

為事件(Event)加上控制(handler)，是個常用設計，舉個例子來說，假設有個文字欄位，操作時希望選取這個欄位時，欄位值會自動選取(反白)，以方便新數值鍵入。看起來像

內容很簡單，就是為 onclick 和 onfocus 這兩個事件加入控制，看起來像：

好了，一份 HTML 文件中，如果有個十來個這種欄位，可能開始有人想用 javascript 來為每個欄位加入這些事件控制，於是我們需要的語法是 addEventListener (Firefox、Chrome、Safari、Opera) 或 attachEvent (IE)，語法為：

if (window.addEventListener){
	//Mozilla 事件沒有 on 開頭
	window.addEventListener('load',helloAudi, false);
}else if (window.attachEvent){
	window.attachEvent('onload',helloAudi);
}

function helloAudi(){
	.....
}

function helloAudi_1(msg){
	alert(msg);
}

handlerName 是一個 function，把 function 的名稱寫進去即可，如上例，不用加括號。但，這個寫法，不可以加參數，也就是不能傳遞參數到 helloAudi() 中，例如要加入 helloAudi_1 時，那寫法改一下，在 handlerName 這裡直接使用 function() 陳述，如：

if (window.addEventListener){
	//Mozilla 事件沒有 on 開頭
	window.addEventListener('load',function(){helloAudi_1('謝謝');}, false);
}else if (window.attachEvent){
	window.attachEvent('onload',function(){helloAudi_1('謝謝');});
}

當然你可以為其他物件的事件加入控制，例如一開始提到的 this.select() 一樣

var obj=document.getElementById('txt');
if (window.addEventListener){
	obj.addEventListener('focus',function(){this.select();}, false);
	obj.addEventListener('click',function(){this.select();}, false);
}else if (window.attachEvent){
	obj.attachEvent('onfocus',function(){this.select();});
	obj.attachEvent('onclick',function(){this.select();});
}

本來，事情到這裡就結束了，不過實作卻發現，在 IE 上，this 關鍵字失效，正確的說，是 this 關鍵字不再是代表我們所認知的那個物件，而是統一指向最上層的 window 物件