JavaScript綁定事件的方法[3種]

要讓 JavaScript 對使用者的操作作出回應，首先要對 DOM 元素綁定事件處理函數。所謂事件處理函數，就是處理使用者操作的函數，不同的操作對應不同的名稱。

在JavaScript中，有三種常用的綁定事件的方法：

• 在DOM元素中直接綁定；

• 在JavaScript程式碼中綁定；

• 綁定事件監聽函數。

一. 在DOM元素中直接綁定

這裡的DOM元素，可以理解為HTML標籤。 JavaScript支援在標籤中直接綁定事件，語法為：
onXXX="JavaScript Code"

其中：

onXXX 為事件名稱。例如，滑鼠點選事件 onclick ，滑鼠雙擊事件 ondouble，滑鼠移入事件 onmouseover，滑鼠移出事件 onmouseout 等。

JavaScript Code 為處理事件的JavaScript程式碼，一般是函數。

例如，點擊一個按鈕，彈出警告框的程式碼有以下兩種寫法。

1. 原生函數

實例示範：

2. 自訂函數

實例示範：

二. 在JavaScript程式碼中綁定

在JavaScript程式碼中（即

實例示範：

三. 綁定事件監聽函數

綁定事件的另一種方法是用 addEventListener() 或 attachEvent() 來綁定事件監聽函數。

addEventListener()函式語法：
elementObject.addEventListener(eventName,handle,useCapture);

##attachEvent()函式語法：

elementObject.attachEvent(eventName,handle);

注意：事件句柄函數是指“ 函數名稱”，不能帶小括號。

addEventListener()是標準的綁定事件監聽函數的方法，是W3C所支援的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支援該函數；但是，IE8. 0及其以下版本不支援該方法，它使用attachEvent()來綁定事件監聽函數。所以，這種綁定事件的方法必須要處理瀏覽器相容問題。

下面綁定事件的程式碼，進行了相容性處理，能夠被所有瀏覽器支援：

function addEvent(obj,type,handle){ try{ // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本 obj.addEventListener(type,handle,false); }catch(e){ try{ // IE8.0及其以下版本 obj.attachEvent('on' + type,handle); }catch(e){ // 早期浏览器 obj['on' + type] = handle; } } }

這裡使用try{ ... } catch(e){ ... }取代if ... else... 語句，避免瀏覽器出現錯誤提示。

例如，為一個id="demo" 的按鈕綁定事件，滑鼠點擊時彈出警告框：

addEvent(document.getElementById("demo"),"click",myAlert); function myAlert(){ alert("又是一个警告框"); }

實例示範：