怎麼給元素新增事件？JS繫結事件三種方式解析

javascript作為指令碼語言, 可以為頁面上的元素繫結事件，用於在指定事件發生時能自動呼叫相應的事件處理程式處理事件。那麼怎麼給元素新增事件？下面本篇文章給大家介紹一下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='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>

上述程式碼的執行結果和範例 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繫結事件三種方式解析的詳細內容，更多請關注TW511.COM其它相關文章！