要想讓 JavaScript 對用戶的操作作出響應,首先要對 DOM 元素綁定事件處理函數。所謂事件處理函數,就是處理用戶操作的函數,不同的操作對應不同的名稱。
在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代碼中綁定
在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("又是一個警告框");
- }