快捷導(dǎo)航

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

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

所有的JavaScript事件處理程序的作用域是在其定義時(shí)的作用域而非調(diào)用時(shí)的作用域中執(zhí)行,并且它們能存取那個(gè)作用域中的任何一個(gè)本地變量。但是HTML標(biāo)簽屬性注冊(cè)處理程序就是一個(gè)例外。看下面四種方式

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

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

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

上面的代碼是通過設(shè)置HTML標(biāo)簽屬性為給button 添加了點(diǎn)擊事件,當(dāng)點(diǎn)擊button 按鈕時(shí)會(huì)彈出這個(gè)button的id,即btn1。

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

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

關(guān)于with的用法,可以自行查閱,這里后面有文章講解。讀者先自行了解一下。提供一個(gè)連接（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="測(cè)試" onclick="test()" />
<script type="text/javascript">
  function test(){
   alert(this.id);
  }
</script>

這段代碼彈出來的是undefined。

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

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

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

這段代碼彈出來的是btn3。

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

當(dāng)使用addEventListener()注冊(cè)時(shí),調(diào)用的處理程序使用事件目標(biāo)作為它們的this值。但是對(duì)于還用attachment()注冊(cè)的處理程序作為函數(shù)調(diào)用,它們的this值是全局（window）對(duì)象。就是說的第四中方式

第四種方式(通過addEventListener和attachment):

<input type="button" id="btn3" value="測(cè)試" 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。（此時(shí)調(diào)用的是attachement）

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

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

/*
*target:目標(biāo)對(duì)象,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);//把處理程序作為事件目標(biāo)的方法調(diào)用,更改this指向。
          });
        }
}

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

您可能感興趣的文章: