99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区

這篇文章主要介紹JS中如何設(shè)置事件處理程序，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供華寧網(wǎng)站建設(shè)、華寧做網(wǎng)站、華寧網(wǎng)站設(shè)計、華寧網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、華寧企業(yè)網(wǎng)站模板建站服務(wù)，十年華寧做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

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

上面的代碼是通過設(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ù))

這段代碼彈出來的是undefined。

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

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

這段代碼彈出來的是btn3。

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

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

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

 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.(修復了上面的問題,增加了通用的addEventListener)。

如果想修復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è)置事件處理程序”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享題目：JS中如何設(shè)置事件處理程序
文章來源：http://ef60e0e.cn/article/pophpj.html