JavaScript繫結事件的方法[3種]
阿新 • • 發佈：2019-01-22
要想讓 JavaScript 對使用者的操作作出響應，首先要對 DOM 元素繫結事件處理函式。所謂事件處理函式，就是處理使用者操作的函式，不同的操作對應不同的名稱。
在JavaScript中，有三種常用的繫結事件的方法：
onXXX="JavaScript Code"
其中：
例如，單擊一個按鈕，彈出警告框的程式碼有如下兩種寫法。
1. 原生函式
在JavaScript程式碼中（即<script>標籤內）繫結事件可以使JavaScript程式碼與HTML標籤分離，文件結構清晰，便於管理和開發。
在JavaScript程式碼中繫結事件的語法為：
elementObject.onXXX=function(){
// 事件處理程式碼
}
其中：
例如，為 id="demo" 的按鈕繫結一個事件，顯示它的 type 屬性：
addEventListener()函式語法：
elementObject.addEventListener(eventName,handle,useCapture);
attachEvent()函式語法：
elementObject.attachEvent(eventName,handle);
注意：事件控制代碼函式是指“ 函式名 ”，不能帶小括號。
addEventListener()是標準的繫結事件監聽函式的方法，是W3C所支援的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支援該函式；但是，IE8.0及其以下版本不支援該方法，它使用attachEvent()來繫結事件監聽函式。所以，這種繫結事件的方法必須要處理瀏覽器相容問題。
下面繫結事件的程式碼，進行了相容性處理，能夠被所有瀏覽器支援：
例如，為一個 id="demo" 的按鈕繫結事件，滑鼠單擊時彈出警告框：
在JavaScript中，有三種常用的繫結事件的方法：
- 在DOM元素中直接繫結；
- 在JavaScript程式碼中繫結；
- 繫結事件監聽函式。
一. 在DOM元素中直接繫結
這裡的DOM元素，可以理解為HTML標籤。JavaScript支援在標籤中直接繫結事件，語法為：onXXX="JavaScript Code"
其中：
- onXXX 為事件名稱。例如，滑鼠單擊事件 onclick ，滑鼠雙擊事件 ondouble，滑鼠移入事件 onmouseover，滑鼠移出事件 onmouseout 等。
- JavaScript Code 為處理事件的JavaScript程式碼，一般是函式。
例如，單擊一個按鈕，彈出警告框的程式碼有如下兩種寫法。
1. 原生函式
<input onclick="alert('謝謝支援')" type="button" value="點選我，彈出警告框" />2. 自定義函式
<input onclick="myAlert()" type="button" value="點選我，彈出警告框" /> <script type="text/javascript"> function myAlert(){ alert("謝謝支援"); } </script>
在JavaScript程式碼中（即<script>標籤內）繫結事件可以使JavaScript程式碼與HTML標籤分離，文件結構清晰，便於管理和開發。
在JavaScript程式碼中繫結事件的語法為：
elementObject.onXXX=function(){
// 事件處理程式碼
}
其中：
- elementObject 為DOM物件，即DOM元素。
- onXXX 為事件名稱。
例如，為 id="demo" 的按鈕繫結一個事件，顯示它的 type 屬性：
<input id="demo" type="button" value="點選我，顯示 type 屬性" /> <script type="text/javascript"> document.getElementById("demo").onclick=function(){ alert(this.getAttribute("type")); // this 指當前發生事件的HTML元素，這裡是<div>標籤 } </script>
三. 繫結事件監聽函式
繫結事件的另一種方法是用 addEventListener() 或 attachEvent() 來繫結事件監聽函式。addEventListener()函式語法：
elementObject.addEventListener(eventName,handle,useCapture);
| 引數 | 說明 |
|---|---|
| elementObject | DOM物件（即DOM元素）。 |
| eventName | 事件名稱。注意，這裡的事件名稱沒有“ on ”，如滑鼠單擊事件 click ，滑鼠雙擊事件 doubleclick ，滑鼠移入事件 mouseover，滑鼠移出事件 mouseout 等。 |
| handle | 事件控制代碼函式，即用來處理事件的函式。 |
| useCapture | Boolean型別，是否使用捕獲，一般用false 。這裡涉及到JavaScript事件流的概念，後續章節將會詳細講解。 |
attachEvent()函式語法：
elementObject.attachEvent(eventName,handle);
| 引數 | 說明 |
|---|---|
| elementObject | DOM物件（即DOM元素）。 |
| eventName | 事件名稱。注意，與addEventListener()不同，這裡的事件名稱有“ on ”，如滑鼠單擊事件 onclick ，滑鼠雙擊事件 ondoubleclick ，滑鼠移入事件 onmouseover，滑鼠移出事件 onmouseout 等。 |
| 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;
}
}
}例如，為一個 id="demo" 的按鈕繫結事件，滑鼠單擊時彈出警告框：
addEvent(document.getElementById("demo"),"click",myAlert);
function myAlert(){
alert("又是一個警告框");
}