要想讓 JavaScript 對用戶的操作作出響應(yīng)，首先要對 DOM 元素綁定事件處理函數(shù)。所謂事件處理函數(shù)，就是處理用戶操作的函數(shù)，不同的操作對應(yīng)不同的名稱。

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

在DOM元素中直接綁定；

在JavaScript代碼中綁定；

綁定事件監(jiān)聽函數(shù)。

一. 在DOM元素中直接綁定

這里的DOM元素，可以理解為HTML標(biāo)簽。JavaScript支持在標(biāo)簽中直接綁定事件，語法為：
? ??onXXX="JavaScript Code"

其中：

• onXXX 為事件名稱。例如，鼠標(biāo)單擊事件 onclick ，鼠標(biāo)雙擊事件 ondouble，鼠標(biāo)移入事件 onmouseover，鼠標(biāo)移出事件 onmouseout 等。
• JavaScript Code 為處理事件的JavaScript代碼，一般是函數(shù)。

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

1. 原生函數(shù)

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

實(shí)例演示：


2. 自定義函數(shù)

<input onclick="myAlert()" type="button" value="點(diǎn)擊我，彈出警告框" />

<script type="text/javascript">

function myAlert(){

alert("謝謝支持");

}

</script>

實(shí)例演示：

二.?在JavaScript代碼中綁定

在JavaScript代碼中（即<script>標(biāo)簽內(nèi)）綁定事件可以使JavaScript代碼與HTML標(biāo)簽分離，文檔結(jié)構(gòu)清晰，便于管理和開發(fā)。

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

其中：

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

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

<input id="demo" type="button" value="點(diǎn)擊我，顯示 type 屬性" />

<script type="text/javascript">

document.getElementById("demo").onclick=function(){

alert(this.getAttribute("type")); // this 指當(dāng)前發(fā)生事件的HTML元素，這里是<div>標(biāo)簽

}

</script>

實(shí)例演示：

三. 綁定事件監(jiān)聽函數(shù)

綁定事件的另一種方法是用 addEventListener() 或 attachEvent() 來綁定事件監(jiān)聽函數(shù)。

addEventListener()函數(shù)語法：
elementObject.addEventListener(eventName,handle,useCapture);
參數(shù) 說明

elementObject	DOM對象（即DOM元素）。
eventName	事件名稱。注意，這里的事件名稱沒有“ on ”，如鼠標(biāo)單擊事件?click ，鼠標(biāo)雙擊事件?doubleclick ，鼠標(biāo)移入事件 mouseover，鼠標(biāo)移出事件 mouseout 等。
handle	事件句柄函數(shù)，即用來處理事件的函數(shù)。
useCapture	Boolean類型，是否使用捕獲，一般用false 。這里涉及到JavaScript事件流的概念，后續(xù)章節(jié)將會詳細(xì)講解。

attachEvent()函數(shù)語法：
elementObject.attachEvent(eventName,handle);
參數(shù) 說明

elementObject	DOM對象（即DOM元素）。
eventName	事件名稱。注意，與addEventListener()不同，這里的事件名稱有“ on ”，如鼠標(biāo)單擊事件 onclick ，鼠標(biāo)雙擊事件 ondoubleclick ，鼠標(biāo)移入事件 onmouseover，鼠標(biāo)移出事件 onmouseout 等。
handle	事件句柄函數(shù)，即用來處理事件的函數(shù)。

注意：事件句柄函數(shù)是指“ 函數(shù)名 ”，不能帶小括號。

addEventListener()是標(biāo)準(zhǔn)的綁定事件監(jiān)聽函數(shù)的方法，是W3C所支持的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持該函數(shù)；但是，IE8.0及其以下版本不支持該方法，它使用attachEvent()來綁定事件監(jiān)聽函數(shù)。所以，這種綁定事件的方法必須要處理瀏覽器兼容問題。

下面綁定事件的代碼，進(jìn)行了兼容性處理，能夠被所有瀏覽器支持：

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... 語句，避免瀏覽器出現(xiàn)錯誤提示。

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

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

function myAlert(){

alert("又是一個警告框");

}

實(shí)例演示：
《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的JavaScript绑定事件的方法[3种]的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。