在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="attention()" type="button" value="點我試試22" /> <script type="text/javascript"> function attention(){ alert("提示：這是一個警告提示"); } </script> 二. 在js代碼中綁定 在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> 注：給一個事件綁定多個操作只會執行最后一個 例： document.getElementById("btn1").onclick=function(){ alert("method111"); }; document.getElementById("btn1").onclick=function(){ alert("method222"); }; document.getElementById("btn1").onclick=function(){ alert("method333"); }; 只會彈出“method333”； 三. 綁定事件監聽函數 綁定事件的另一種方法是用 addEventListener() 或 attachEvent() 來綁定事件監聽函數。 注：可給一個事件綁定多個操作 addEventListener()函數語法： elementObject.addEventListener(eventName,handle,useCapture); 參數 說明 elementObject DOM對象（即DOM元素）。 eventName 事件名稱。注意，這里的事件名稱沒有“ on ”，如鼠標單擊事件 click ，鼠標雙擊事件 doubleclick ，鼠標移入事件 mouseover，鼠標移出事件 mouseout 等。 handle 事件句柄函數，即用來處理事件的函數。 useCapture Boolean類型，是否使用捕獲，一般用false 。這里涉及到JavaScript事件流的概念，后續章節將會詳細講解。 例： var btn1Obj = document.getElementById("btn1"); //element.addEventListener(type,listener,useCapture); btn1Obj.addEventListener("click",method1,false); btn1Obj.addEventListener("click",method2,false); btn1Obj.addEventListener("click",method3,false); 執行順序為method1->method2->method3 attachEvent()函數語法： elementObject.attachEvent(eventName,handle); 參數 說明 elementObject DOM對象（即DOM元素）。 eventName 事件名稱。注意，與addEventListener()不同，這里的事件名稱有“ on ”，如鼠標單擊事件 onclick ，鼠標雙擊事件 ondoubleclick ，鼠標移入事件 onmouseover，鼠標移出事件 onmouseout 等。 handle 事件句柄函數，即用來處理事件的函數。 例： var btn1Obj = document.getElementById("btn1"); //object.attachEvent(event,function); btn1Obj.attachEvent("onclick",method1); btn1Obj.attachEvent("onclick",method2); btn1Obj.attachEvent("onclick",method3); 執行順序為method3->method2->method1 注意：事件句柄函數是指“ 函數名 ”，不能帶小括號。 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中，有三種常用的綁定事件的方法：
- 在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.調用自定義函數
二. 在js代碼中綁定
在JavaScript代碼中（即<script>標簽內）綁定事件可以使JavaScript代碼與HTML標簽分離，文檔結構清晰，便於管理和開發。
在JavaScript代碼中綁定事件的語法為：
elementObject.onXXX=function(){
// 事件處理代碼
}
其中：
- elementObject 為DOM對象，即DOM元素。
- onXXX 為事件名稱。
例如，為 id="demo" 的按鈕綁定一個事件，顯示它的 type 屬性：
注：
給一個事件綁定多個操作只會執行最后一個
例： document.getElementById("btn1").onclick=function(){
alert("method111");
};
document.getElementById("btn1").onclick=function(){
alert("method222");
};
document.getElementById("btn1").onclick=function(){
alert("method333");
};
只會彈出“method333”；
三. 綁定事件監聽函數
綁定事件的另一種方法是用 addEventListener() 或 attachEvent() 來綁定事件監聽函數。
注：可給一個事件綁定多個操作
addEventListener()函數語法：
elementObject.addEventListener(eventName,handle,useCapture);
| 參數 | 說明 |
|---|---|
| elementObject | DOM對象（即DOM元素）。 |
| eventName | 事件名稱。注意，這里的事件名稱沒有“ on ”，如鼠標單擊事件 click ，鼠標雙擊事件 doubleclick ，鼠標移入事件 mouseover，鼠標移出事件 mouseout 等。 |
| handle | 事件句柄函數，即用來處理事件的函數。 |
| useCapture | Boolean類型，是否使用捕獲，一般用false 。這里涉及到JavaScript事件流的概念，后續章節將會詳細講解。 |
例：
var btn1Obj = document.getElementById("btn1");
//element.addEventListener(type,listener,useCapture);
btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);
執行順序為method1->method2->method3
attachEvent()函數語法：
elementObject.attachEvent(eventName,handle);
| 參數 | 說明 |
|---|---|
| elementObject | DOM對象（即DOM元素）。 |
| eventName | 事件名稱。注意，與addEventListener()不同，這里的事件名稱有“ on ”，如鼠標單擊事件 onclick ，鼠標雙擊事件 ondoubleclick ，鼠標移入事件 onmouseover，鼠標移出事件 onmouseout 等。 |
| handle | 事件句柄函數，即用來處理事件的函數。 |
例：
var btn1Obj = document.getElementById("btn1");
//object.attachEvent(event,function);
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);
執行順序為method3->method2->method1
注意：事件句柄函數是指“ 函數名 ”，不能帶小括號。
addEventListener()是標准的綁定事件監聽函數的方法，是W3C所支持的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持該函數；但是，IE8.0及其以下版本不支持該方法，它使用attachEvent()來綁定事件監聽函數。所以，這種綁定事件的方法必須要處理瀏覽器兼容問題。
下面綁定事件的代碼，進行了兼容性處理，能夠被所有瀏覽器支持：
這里使用 try{ ... } catch(e){ ... } 代替 if ... else... 語句，避免瀏覽器出現錯誤提示。
例如，為一個 id="demo" 的按鈕綁定事件，鼠標單擊時彈出警告框：
addEvent(document.getElementById("demo"),"click",myAlert);
function myAlert(){
alert("又是一個警告框");
}
動態綁定：
jquery給動態添加的dom元素綁定事件
$('input').click(function () {
//處理代碼
});
這只能是對已經加載好的元素定義事件，那些后來添加插入的元素則需要另行綁定，對於頁面中動態添加的元素，在頁面加載完成后添加的，因此頁面加載時無法給其綁定事件處理函數，好在jquery提供了on方法，如為動態添加的元素附加單擊事件。對於jquery1.7+的版本直接用on方法， $('body').append('<p id=\"pid\"></p>'); $('#pid').on('click',function(){ //業務邏輯 }); 對於早於1.7的版本用live方法. $('body').append('<p id=\"pid\"></p>'); $('pid').live('click',function(){ //業務邏輯 });