事件綁定的幾種方式

要想讓 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代碼中綁定

注冊/移除事件的三種方式

var box = document.getElementById('box');
box.onclick = function () {       

//兼容性最好，同一元素多次調用會出現覆蓋問題，

//如果需要綁定多個方法則直接寫在一起即可如document.getElementById('wrap').onclick = function(){a();b();}或<div id="wrap" onclick="a();b();"></div>
console.log('點擊后執行');
};
box.onclick = null;                  //移除事件

box.addEventListener('click', eventCode, false);           // ie8及以下不支持,可以多次出現，不存在覆蓋問題
box.removeEventListener('click', eventCode, false);      // ie8及以下不支持

box.attachEvent('onclick', eventCode);
box.detachEvent('onclick', eventCode);

function eventCode() {
console.log('點擊后執行');
}

 

兼容代碼

function addEventListener(element, type, fn) {
if (element.addEventListener) {
element.addEventListener(type, fn, false);
} else if (element.attachEvent){
element.attachEvent('on' + type,fn);
} else {
element['on'+type] = fn;
}
}

function removeEventListener(element, type, fn) {
if (element.removeEventListener) {
element.removeEventListener(type, fn, false);
} else if (element.detachEvent) {
element.detachEvent('on' + type, fn);
} else {
element['on'+type] = null;
}
}

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

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

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