站長資訊網javascript作為腳本語言, 可以為頁面上的元素綁定事件，用于在指定事件發(fā)生時能自動調用相應的事件處理程序處理事件。那么怎么給元素添加事件？下面本篇文章給大家介紹一下JS綁定事件三種方式，希望對大家有所幫助！
為了使瀏覽器在事件發(fā)生時能自動調用相應的事件處理程序處理事件，需要對事件源綁定事件處理程序（綁定事件處理程序也叫注冊事件處理程序）。
綁定事件處理程序有以下 3 種方式：
-
在 HTML 標簽中，使用事件屬性（例onclick）綁定事件處理程序。該方式通過設置標簽的事件屬性值為事件處理程序。這種方法現在不推薦使用， html 和 js 耦合, 不利于維護。
-
在 js 中，使用事件源的事件屬性（例onclick）綁定事件處理函數。該方式通過設置事件源對象的事件屬性值為事件處理函數。
-
在 js 中，使用
addEventListener()方法綁定事件和事件處理函數（IE9 之前的版本則使用 attach Event() 方法）。
1、使用HTML標簽的事件屬性綁定處理程序
需要注意的是，使用 HTML 標簽的事件屬性綁定事件處理程序的方式時，事件屬性中的腳本代碼不能包含函數聲明，但可以是函數調用或一系列使用分號分隔的腳本代碼。
【例 1】使用 HTML 標簽的事件屬性綁定事件處理程序。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>使用HTML標簽的事件屬性綁定事件處理程序</title> </head> <body> <input type="button" onclick="var name='PHP中文網';alert(name);" value="事件綁定測試"/> </body> </html>
上述代碼的 button 為 click 事件的目標對象，其通過標簽的事件屬性 onclick 綁定了兩條腳本代碼進行事件的處理。上述代碼在 Chrome 瀏覽器的運行后，當用戶單擊按鈕時，將彈出警告對話框，結果如下圖所示。
當事件處理程序涉及的代碼在 2 條以上時，如果還像示例 1 那樣綁定事件處理程序，會使程序的可讀性變得很差。對此，可以將事件處理程序定義為一個函數，然后在事件屬性中調用該函數。
【例 2】HTML 標簽的事件屬性為函數調用。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML標簽的事件屬性為函數調用</title> <script> function printName(){ var name = "PHP中文網"; alert(name); } </script> </head> <body> <input type="button" onClick="printName()" value="事件綁定測試"/> </body> </html>
上述代碼的執(zhí)行結果和示例 1 完全相同。從上述兩個示例可以看到，標簽事件屬性將 JS 腳本代碼和 HTML 標簽混合在一起，違反了 Web 標準的 JS 和 HTML 應分離的原則。所以，使用 HTML 標簽的事件屬性綁定事件處理程序不好，在實際應用時應盡量避免使用。
2、使用事件源的事件屬性綁定處理程序
使 HTML 和 JS 分離的其中一種方式是通過使用事件源的事件屬性綁定事件處理函數，綁定格式如下：
obj.on事件名 = 事件處理函數
格式中的 obj 為事件源對象。綁定的事件程序通常為一個匿名函數的定義語句，或者是一個函數名稱。
事件源的事件屬性綁定處理程序示例：
oBtn.onclick = function(){//oBtn為事件源對象，它的單擊事件綁定了一個匿名函數定義 alert('hi') };
【例 3】使用事件源的事件屬性綁定事件處理函數。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>使用事件源的事件屬性綁定事件處理函數</title> <script> window.onload = function(){//窗口加載事件綁定了一個匿名函數 //定義一個名為fn的函數 function fn(){ alert('hello'); } //獲取事件源對象 var oBtn1 = document.getElementById("btn1"); var oBtn2 = document.getElementById("btn2"); //綁定一個匿名函數 oBtn1.onclick = function(){ alert("hi"); } //綁定一個函數名 oBtn2.onclick = fn; }; </script> </head> <body> <input type="button" id="btn1" value="綁定一個匿名函數"> <input type="button" id="btn2" value="綁定一個函數名"> </body> </html>
上述 JS 代碼中處理了 3 個事件：文檔窗口加載事件 load、兩個按鈕的單擊事件 click。這三個事件的處理都是使用事件源的事件屬性綁定事件處理函數來實現的，其中 load 事件和第一個按鈕的click事件綁定的是匿名函數，而第二個按鈕的click事件綁定的是一個函數名。
需要特別注意的是，不能在 oBtn2 綁定的函數名后面加“()”，否則綁定的函數變?yōu)楹瘮嫡{用，這樣就會在 JS 引擎執(zhí)行到該行代碼時自動調用執(zhí)行，而在事件觸發(fā)時卻不會執(zhí)行了。
在文檔所有元素加載完成后會處理窗口加載事件函數，而單擊每個按鈕時將會觸發(fā)單擊事件。單擊第一個和第二個按鈕后，將分別彈出顯示“hi”和“hello”兩個警告對話框。
3、使用addEventListener()綁定處理程序
使用事件源對象的事件屬性綁定事件處理程序方式雖然簡單，但其存在一個不足之處：一個事件只能綁定一個處理程序，后面綁定的事件處理函數會覆蓋前面綁定的事件處理函數。實際應用中，一個事件源的一個事件可能會用到多個函數來處理。
當一個事件源需要使用多個函數來處理時，可以通過事件源調用 addEventListener()（針對標準瀏覽器）來綁定事件處理函數以實現此需求。一個事件源通過方法綁定多個事件函數的實現方式是：對事件源對象調用多次 addEventListener()，其中每次的調用只綁定一個事件處理函數。
addEventListener() 是標準事件模型中的一個方法，對所有標準瀏覽器都有效。使用 addEvent Liste ner() 綁定事件處理程序的格式如下：
事件源.addEventListener(事件名稱,事件處理函數名,是否捕獲);
參數“事件名稱”是一個不帶“on”的事件名；參數“是否捕獲”是一個布爾值，默認值為 false，取 false 時實現事件冒泡，取 true 時實現事件捕獲。
通過多次調用 addEventListener() 可以為一個事件源對象的同一個事件類型綁定多個事件處理函數。當對象發(fā)生事件時，所有該事件綁定的事件處理函數就會按照綁定的順序依次調用執(zhí)行。另外，需要注意的是，addEventListener() 綁定的事件處理函數中的 this 指向事件源。
addEventListener() 綁定處理程序示例：
document.addEventListener('click',fn1,false);//click事件綁定fn1函數實現事件冒泡 document.addEventListener('click',fn2,true);//click事件綁定fn2函數實現事件捕獲
【例 4】使用 addEventListener() 綁定事件函數。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>使用addEventListener()/attachEvent()綁定事件函數</title> <script> function fn1(){ alert("fn1()"); } function fn2(){ alert("fn2()"); } function bindTest(){ document.addEventListener('click',fn1,false);//首先綁定fn1函數 document.addEventListener('click',fn2,false); } bindTest();//調用函數 </script> </head> <body> </body> </html>
上述代碼在瀏覽器中運行后，當單擊文檔窗口時，會依次彈出顯示“fn1()”和“fn2()”的警告對話框。
【推薦學習：javascript高級教程】
