所有的JavaScript事件處理程序的作用域是在其定義時的作用域而非調用時的作用域中執行,并且它們能存取那個作用域中的任何一個本地變量。但是HTML標簽屬性注冊處理程序就是一個例外。看下面四種方式：
第一種方式(HTML標簽屬性):
<input type="button" id="btn1" value="測試" onclick="alert(this.id);" />
上面的代碼是通過設置HTML標簽屬性為給button 添加了點擊事件,當點擊button 按鈕時會彈出這個button的id,即btn1。
這種通過HTML屬性來注冊事件處理程序是一個例外。它們被轉換為能存取全局變量的頂級函數而非任何本地變量。由于歷史的原因,它們運行在一個修改后的作用域鏈中。通過HTML屬性定義的事件處理程序能像本地變量一樣使用目標對象、容器對象(form)對象和document對象的屬性。它會被瀏覽器轉換為類似如下的代碼：
function (event){ with(document){ with(this.form||{}){ with(this){ /*具體的事件處理代碼*/ } } } }關于with的用法,可以自行查閱,這里后面有文章講解。讀者先自行了解一下。提供一個連接（https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/with）
這種方式現在已經不推薦使用。
第二種方式(調用函數)
<input type="button" id="btn2" value="測試" onclick="test()" /><script type="text/javascript"> function test(){ alert(this.id); }</script>這段代碼彈出來的是undefined。
這種設置方式是通過調用全局函數來進行的,這時this指向的是window,而非這個button的調用者,可以通過輸出console.log(this==window);來進行驗證
第三種方式(調用函數)
<input type="button" id="btn3" value="測試" /><script type="text/javascript"> var btn3 = document.getElementById("btn3"); btn3.onclick = function () { alert(this.id); };</script>這段代碼彈出來的是btn3。
這種事件處理程序在事件目標上定義,所以它們作為這個對象的方法來調用(但是下面在IE里面有個例外)。這就是說在事件處理程序內,this關鍵字指的是事件目標。
當使用addEventListener()注冊時,調用的處理程序使用事件目標作為它們的this值。但是對于還用attachment()注冊的處理程序作為函數調用,它們的this值是全局（window）對象。就是說的第四中方式
第四種方式(通過addEventListener和attachment):
<input type="button" id="btn3" value="測試" onclick="test()" /> var btn = document.getElementById("btn3"); var handler = function () { console.log(this.id); }; if (btn.addEventListener) { console.log("addEventListener"); btn.addEventListener("click", handler, false); } else if (btn.attachEvent) {//IE9之前的版本 console.log("attachEvent"); btn.attachEvent("onclick",handler); }在IE5-IE8 版本輸出的是undefined。（此時調用的是attachement）
IE9以后的版本輸出的btn3.(修復了上面的問題,增加了通用的addEventListener)。
如果想修復IE5-8里面的那個問題,可以使用下面的方法。
/**target:目標對象,button之類的*type:"click"字符串事件名稱,無需帶on*handler:調用的處理程序*/function addEvent(target,type,handler){ if (target.addEventListener) { target.addEventListener(type, handler, false); } else if (target.attachEvent) {//IE9之前的版本 btn.attachEvent("on"+type,function(event){ return hanlder.call(target,event);//把處理程序作為事件目標的方法調用,更改this指向。 }); }}以上所述是小編給大家介紹的在JS中通過四種設置事件處理程序的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
