註冊事件處理程式

兩種方式：

一 給事件目標物件或文件元素設定屬性

二 更具有通用性，是將事件處理程式傳遞給物件或元素的一個方法

但是複雜的是，每種技術都有兩個版本。可以在js程式碼中設定事件處理程式為物件屬性，或對於文件元素，可以在HTML中直接設定相應屬性。對於通過方法呼叫處理程式註冊。有一個標準方法，命名為addEventListener()，除IE8及以前版本之外，所有瀏覽器都支援這個方式，而IE之前版本支援一個叫attachEvent()的不同方法。

設定js物件屬性為事件處理程式

註冊事件處理程式最簡單的方式就是通過設定事件目標的屬性為所需事件處理程式函式。按照約定，事件處理程式屬性的名字由”on”後面跟著事件名組成：onclick/onchange/onload/onmouseover等。注意這些屬性是區分大小寫的，所有都是小寫即使有多個單片語成如onreadystatechange。

這種方式的缺點是其設計都是圍繞著假設每個事件目標對每種事件型別將最多隻有一個處理程式。如果想編寫能夠在任意文件中都能使用的指令碼庫程式碼，更好的方式是使用一種不修改或覆蓋任何已有註冊程式的技術。

設定html標籤屬性為事件處理程式

如<button onclick=”alert(‘hello’);”>點我！</button>

如果html事件處理程式屬性包含多條js語句，要記住必須使用分號分隔這些語句或斷開屬性值使其跨多行。

addEventListener()

 它接受三個引數。

A.     事件型別，這個事件型別是字串，但它不應該包括用於設定事件處理程式屬性的字首“on”

B.      當指定型別事件發生時應該呼叫的函式

C.      布林值 通常是false，如果設定為true，那麼函式註冊為捕獲事件處理程式

 removeEventListener()

同樣有三個引數，從物件中刪除事件處理程式函式而非新增，它常用於臨時註冊事件處理程式，然後不久就刪除它，例如mousedown事件，可以為mousemove和mouseup事件註冊臨時捕獲事件處理程式來看看使用者是否拖動滑鼠。當mouseup事件到來後，可以登出這些事件處理程式。

document.removeEventListener(“mousemove”,handleMouseMove,true);

document.removeEventListener(“mouseup”,handleMouseUp,true);

attachEvent()

IE9之前的IE不支援上述的兩個方法。IE5及以後版本定義了類似的方法。attachEvent()和detachEvent() 方法原理有類似addEventListener()和removeEventListener()。

但有如下例外：

l  因為IE不支援事件捕獲，所以attachEvent()和detachEvent()要求只有兩個引數。事件型別和處理程式函式

l  IE方法的第一個引數使用了帶“on”字首的事件處理程式屬性名，而非沒有字首的事件型別。例如addEventListener()傳遞”click”而attachEvent()傳遞“onclick”。

l  attachEvent允許相同事件處理程式函式註冊多次，當特定的事件型別發生時，註冊函式的呼叫次數和註冊次數一樣

經常會有這個的事件處理程式寫法

var b =document.getElementById(“mybutton”);

var handler = function(){alert(“thanks!”);};

if(b.addEventListener)

  b. addEventListener(“click”, handler,false);

else if(b.attachEvent)

  b. attachEvent(“onclick”, handler);