事件綁定

要想讓 JavaScript 對用戶的操做做出響應，首先要對 DOM 元素綁定事件處理函數。所謂事件處理函數，就是處理用戶操做的函數，不一樣的操做對應不一樣的名稱。

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

1. 在DOM元素中直接綁定；
2. 在JavaScript代碼中綁定；
3. 綁定事件監聽函數。

一. 在DOM元素中直接綁定

這裏的DOM元素，能夠理解爲HTML標籤。JavaScript支持在標籤中直接綁定事件，語法爲：
    onXXX="JavaScript Code"

其中：

• onXXX 爲事件名稱。例如，鼠標單擊事件 onclick ，鼠標雙擊事件 ondouble，鼠標移入事件 onmouseover，鼠標移出事件 onmouseout 等。
• JavaScript Code 爲處理事件的JavaScript代碼，通常是函數。

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

1. 原生函數

1. <input onclick="alert('謝謝支持')" type="button" value="點擊我，彈出警告框" />

2. 自定義函數

1. <input onclick="myAlert()" type="button" value="點擊我，彈出警告框" />
2. <script type="text/javascript">
3. function myAlert(){
4. alert("謝謝支持");
5. }
6. </script>

二. 在JavaScript代碼中綁定

在JavaScript代碼中（即<script>標籤內）綁定事件能夠使JavaScript代碼與HTML標籤分離，文檔結構清晰，便於管理和開發。

在JavaScript代碼中綁定事件的語法爲：
elementObject.onXXX=function(){
    // 事件處理代碼
}

其中：

• elementObject 爲DOM對象，即DOM元素。
• onXXX 爲事件名稱。

例如，爲 id="demo" 的按鈕綁定一個事件，顯示它的 type 屬性：

1. <input id="demo" type="button" value="點擊我，顯示 type 屬性" />
2. <script type="text/javascript">
3. document.getElementById("demo").onclick=function(){
4. alert(this.getAttribute("type")); // this 指當前發生事件的HTML元素，這裏是<div>標籤
5. }
6. </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()來綁定事件監聽函數。因此，這種綁定事件的方法必需要處理瀏覽器兼容問題。

下面綁定事件的代碼，進行了兼容性處理，可以被全部瀏覽器支持：

1. function addEvent(obj,type,handle){
2. try{ // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
3. obj.addEventListener(type,handle,false);
4. }catch(e){
5. try{ // IE8.0及其如下版本
6. obj.attachEvent('on' + type,handle);
7. }catch(e){ // 早期瀏覽器
8. obj['on' + type] = handle;
9. }
10. }
11. }

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

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

1. addEvent(document.getElementById("demo"),"click",myAlert);
2. function myAlert(){
3. alert("又是一個警告框"

要想讓 JavaScript 對用戶的操做做出響應，首先要對 DOM 元素綁定事件處理函數。所謂事件處理函數，就是處理用戶操做的函數，不一樣的操做對應不一樣的名稱。

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

1. 在DOM元素中直接綁定；
2. 在JavaScript代碼中綁定；
3. 綁定事件監聽函數。

一. 在DOM元素中直接綁定

這裏的DOM元素，能夠理解爲HTML標籤。JavaScript支持在標籤中直接綁定事件，語法爲：
    onXXX="JavaScript Code"

其中：

• onXXX 爲事件名稱。例如，鼠標單擊事件 onclick ，鼠標雙擊事件 ondouble，鼠標移入事件 onmouseover，鼠標移出事件 onmouseout 等。
• JavaScript Code 爲處理事件的JavaScript代碼，通常是函數。

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

1. 原生函數

1. <input onclick="alert('謝謝支持')" type="button" value="點擊我，彈出警告框" />

2. 自定義函數

1. <input onclick="myAlert()" type="button" value="點擊我，彈出警告框" />
2. <script type="text/javascript">
3. function myAlert(){
4. alert("謝謝支持");
5. }
6. </script>

實例演示：

二. 在JavaScript代碼中綁定

在JavaScript代碼中（即<script>標籤內）綁定事件能夠使JavaScript代碼與HTML標籤分離，文檔結構清晰，便於管理和開發。

在JavaScript代碼中綁定事件的語法爲：
elementObject.onXXX=function(){
    // 事件處理代碼
}

其中：

• elementObject 爲DOM對象，即DOM元素。
• onXXX 爲事件名稱。

例如，爲 id="demo" 的按鈕綁定一個事件，顯示它的 type 屬性：

1. <input id="demo" type="button" value="點擊我，顯示 type 屬性" />
2. <script type="text/javascript">
3. document.getElementById("demo").onclick=function(){
4. alert(this.getAttribute("type")); // this 指當前發生事件的HTML元素，這裏是<div>標籤
5. }
6. </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()來綁定事件監聽函數。因此，這種綁定事件的方法必需要處理瀏覽器兼容問題。

下面綁定事件的代碼，進行了兼容性處理，可以被全部瀏覽器支持：

1. function addEvent(obj,type,handle){
2. try{ // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
3. obj.addEventListener(type,handle,false);
4. }catch(e){
5. try{ // IE8.0及其如下版本
6. obj.attachEvent('on' + type,handle);
7. }catch(e){ // 早期瀏覽器
8. obj['on' + type] = handle;
9. }
10. }
11. }

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

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

1. addEvent(document.getElementById("demo"),"click",myAlert);
2. function myAlert(){
3. alert("又是一個警告框"