深入理解在JS中通過四種設(shè)置事件處理程序的方法

更新時間：2017年03月02日 09:38:47 作者：菜鳥葫蘆娃

所有的JavaScript事件處理程序的作用域是在其定義時的作用域而非調(diào)用時的作用域中執(zhí)行,并且它們能存取那個作用域中的任何一個本地變量。但是HTML標簽屬性注冊處理程序就是一個例外?？聪旅嫠姆N方式

所有的JavaScript事件處理程序的作用域是在其定義時的作用域而非調(diào)用時的作用域中執(zhí)行,并且它們能存取那個作用域中的任何一個本地變量。但是HTML標簽屬性注冊處理程序就是一個例外?？聪旅嫠姆N方式：

第一種方式(HTML標簽屬性):

<input type="button" id="btn1" value="測試" onclick="alert(this.id);" />

上面的代碼是通過設(shè)置HTML標簽屬性為給button 添加了點擊事件,當點擊button 按鈕時會彈出這個button的id,即btn1。

這種通過HTML屬性來注冊事件處理程序是一個例外。它們被轉(zhuǎn)換為能存取全局變量的頂級函數(shù)而非任何本地變量。由于歷史的原因,它們運行在一個修改后的作用域鏈中。通過HTML屬性定義的事件處理程序能像本地變量一樣使用目標對象、容器對象(form)對象和document對象的屬性。它會被瀏覽器轉(zhuǎn)換為類似如下的代碼：

 function (event){
  with(document){
   with(this.form||{}){
    with(this){
     /*具體的事件處理代碼*/
    }
   }
  }  
}

關(guān)于with的用法,可以自行查閱,這里后面有文章講解。讀者先自行了解一下。提供一個連接（https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/with）

這種方式現(xiàn)在已經(jīng)不推薦使用。

第二種方式(調(diào)用函數(shù))

<input type="button" id="btn2" value="測試" onclick="test()" />
<script type="text/javascript">
  function test(){
   alert(this.id);
  }
</script>

這段代碼彈出來的是undefined。

這種設(shè)置方式是通過調(diào)用全局函數(shù)來進行的,這時this指向的是window,而非這個button的調(diào)用者,可以通過輸出console.log(this==window);來進行驗證

第三種方式(調(diào)用函數(shù))

<input type="button" id="btn3" value="測試" />
<script type="text/javascript">
   var btn3 = document.getElementById("btn3");
        btn3.onclick = function () {
          alert(this.id);
        };
</script>

這段代碼彈出來的是btn3。

這種事件處理程序在事件目標上定義,所以它們作為這個對象的方法來調(diào)用(但是下面在IE里面有個例外)。這就是說在事件處理程序內(nèi),this關(guān)鍵字指的是事件目標。

當使用addEventListener()注冊時,調(diào)用的處理程序使用事件目標作為它們的this值。但是對于還用attachment()注冊的處理程序作為函數(shù)調(diào)用,它們的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。（此時調(diào)用的是attachement）

IE9以后的版本輸出的btn3.(修復(fù)了上面的問題,增加了通用的addEventListener)。

如果想修復(fù)IE5-8里面的那個問題,可以使用下面的方法。

/*
*target:目標對象,button之類的
*type:"click"字符串事件名稱,無需帶on
*handler:調(diào)用的處理程序
*/
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);//把處理程序作為事件目標的方法調(diào)用,更改this指向。
          });
        }
}

以上所述是小編給大家介紹的在JS中通過四種設(shè)置事件處理程序的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: