javascript的事件處理（一）—

javascript的事件處理（一）——基礎原理

最後更新：2018-12-06 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

事件是使用者或者遊覽器自身執行的某種動作，諸如click，load，mouseover，都是時間的名稱。響應某事件的函數就叫做事件處理常式（或者事件接聽程式），事件處理常式的名字往往以'on'開頭，比如click事件的事件處理常式是onclick，load時間的是onload。

為事件指定處理常式的方式有好幾種：

1. html事件處理常式

<button id = 'mybutton1' onclick = 'alert("button1")' >Button1</button>

<button id = 'mybutton2' onclick = 'handleClick()' >Button2</button>
<script type = 'text/javascript'>
function handleClick(){
     alert("button2");  
  }
</script>

複製代碼

這裡特別一個問題，事件處理程中的代碼在執行時，有權訪問全域範圍中的任何代碼。

但在html中指定事件處處理常式有兩個缺點：

1. 時差問題。

2. html與javascript代碼緊密耦合

第二點比較容易理解，這裡重點講下第一點，比如：

<html>
  <head>
    <title>Test UI Thread</title>
     <script type = 'text/javascript'>
var handleClick = null;
      setTimeout(function(){
       handleClick = function (){
        alert("button2");  
      }
      },10000)

     </script>
  </head>  
  <body>
    <div>
      <button id = 'mybutton2' onclick = 'handleClick()' >Button2</button>
    </div>

  </body>
</html>

複製代碼

在段代碼在頁面剛出現時點擊按鈕是沒有用的，10s後再點擊才能觸發相應事件，這裡因為使用者可能會在hmtl元素一出現就觸發，但當時的事件處理常式可能尚不具備執行條件，這樣就會報錯。

由於以上兩個缺陷，好的開發人員應該摒棄這種事件處理常式。

2. DOM0級事件處理常式

通過Javascript制定事件處理常式的傳統方式，就是將一個函數賦值給一個事件處理常式屬性。這種方法至今仍然為所有現代遊覽器所支援，一是因為簡單，而是跨遊覽器。每個元素(包括window和document)都有自己的事件處理常式屬性，這些屬性通常全部小寫，例如onclick。將這種屬性的值設定為一個函數，就可以指定事件處理常式。

具體如下：

<button id = 'mybutton3' >Button3</button> 
<script type = 'text/javascript'>
var bn3 = document.getElementById('mybutton3');
    bn3.onclick = function(){
      alert('button3');  
    }
</script>

複製代碼

同樣的道理，在這些代碼運行以前不會指定事件處理常式，
特彆強調的是，使用DOM0級方法指定的事件處理常式被認為是元素的方法，因此，這時候的事件處理常式在元素的範圍中運行；換句話說，程式中的this引用當前元素。比如還是上例，代碼換成：

var bn3 = document.getElementById('mybutton3');
bn3.onclick = function(){
    alert(this.id);// mybutton3 
}

複製代碼

這時就會顯示 mybutton3

可以在事件處理常式中通過this訪問元素的任何屬性和方法，以這種方式添加的事件處理常式都在事件流的冒泡階段被處理。

當然只要像下面這樣將事件處理常式屬性設定為null，即可刪除通過DOM0級方法指定的時間處理常式。

bn3.onclick = null;

3. DOM2級事件處理常式

“DOM2級事件”定義了兩個方法，用於處理指定和刪除事件處理常式的操作：addEventListener()和removeEventLister()。所有DOM節點中都包含這兩個方法，並且他們都接受3個參數：要處理的事件名，作為事件處理常式的函數和一個布爾值。最後這個布爾值參數如果是true，表示在捕捉階段呼叫事件呼叫事件處理常式，如果是false，表示在冒泡階段呼叫事件處理常式。比如：

<button id = 'mybutton4' >Button4</button> 
<script type = 'text/javascript'>

var bn4 = document.getElementById('mybutton4');
/*
       * 最後一個參數布爾值
       * true: 捕捉階段呼叫事件處理常式
       * false: 在冒泡階段呼叫事件處理常式
       * 大多數情況下，都是將事件處理常式添加到事件流的冒泡階段，這樣可以最大限度地相容各種遊覽器
*/
      bn4.addEventListener('click',function(){
        alert('button4');
        alert(this.id);
      },false);

  </script>

複製代碼

通過addEventListener()添加的時間處理常式只能使用removeEventListener()來移除；移除時傳入的參數和添加處理常式時使用的參數相同。這意味著通過addEventListener()添加的匿名函數將無法移除，比如：

      var bn4 = document.getElementById('mybutton4');

      bn4.addEventListener('click',function(){
        alert('add event listener of button4');
      },false);

//沒有用
      bn4.removeEventListener('click',function(){
        alert('remove event listener of button4');  
      });

複製代碼

這段代碼之所以沒有起作用是因為實際上，第二個參數與addEventListener()中的那個是完全不同的函數。正確的做法：

var hadler = function(){
    alert('add event listener of button4');
};

bn4.addEventListener('click',hadler,false);
//有用      
bn4.removeEventListener('click',hadler,false);

複製代碼

javascript的事件處理（二）—— 跨遊覽器編程

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More