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