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

標籤：mic   事件流   括弧   cccccc   logs   soft   use   dem   func   

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

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

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

一. 在DOM元素中直接綁定

一. 在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代碼中綁定

在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;        }    }}

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

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

 

addEvent(document.getElementById("demo"),"click",myAlert);

function myAlert(){     alert("又是一個警告框"); }

          

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