溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“JS如何給元素添加事件”，在日常操作中，相信很多人在JS如何給元素添加事件問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”JS如何給元素添加事件”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
為了使瀏覽器在事件發生時能自動調用相應的事件處理程序處理事件，需要對事件源綁定事件處理程序（綁定事件處理程序也叫注冊事件處理程序）。
綁定事件處理程序有以下 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='億速云';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 = "億速云";
alert(name);
}
</script>
</head>
<body>
<input type="button" onClick="printName()" value="事件綁定測試"/>
</body>
</html>上述代碼的執行結果和示例 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 綁定的函數名后面加“()”，否則綁定的函數變為函數調用，這樣就會在 JS 引擎執行到該行代碼時自動調用執行，而在事件觸發時卻不會執行了。
在文檔所有元素加載完成后會處理窗口加載事件函數，而單擊每個按鈕時將會觸發單擊事件。單擊第一個和第二個按鈕后，將分別彈出顯示“hi”和“hello”兩個警告對話框。
3、使用addEventListener()綁定處理程序
使用事件源對象的事件屬性綁定事件處理程序方式雖然簡單，但其存在一個不足之處：一個事件只能綁定一個處理程序，后面綁定的事件處理函數會覆蓋前面綁定的事件處理函數。實際應用中，一個事件源的一個事件可能會用到多個函數來處理。
當一個事件源需要使用多個函數來處理時，可以通過事件源調用 addEventListener()（針對標準瀏覽器）來綁定事件處理函數以實現此需求。一個事件源通過方法綁定多個事件函數的實現方式是：對事件源對象調用多次 addEventListener()，其中每次的調用只綁定一個事件處理函數。
addEventListener() 是標準事件模型中的一個方法，對所有標準瀏覽器都有效。使用 addEvent Liste ner() 綁定事件處理程序的格式如下：
事件源.addEventListener(事件名稱,事件處理函數名,是否捕獲);
參數“事件名稱”是一個不帶“on”的事件名；參數“是否捕獲”是一個布爾值，默認值為 false，取 false 時實現事件冒泡，取 true 時實現事件捕獲。
通過多次調用 addEventListener() 可以為一個事件源對象的同一個事件類型綁定多個事件處理函數。當對象發生事件時，所有該事件綁定的事件處理函數就會按照綁定的順序依次調用執行。另外，需要注意的是，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()”的警告對話框。
到此，關于“JS如何給元素添加事件”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
