js事件綁定的幾種方式


要想讓 JavaScript 對用戶的操作作出響應,首先要對 DOM 元素綁定事件處理函數。所謂事件處理函數,就是處理用戶操作的函數,不同的操作對應不同的名稱。

在JavaScript中,有三種常用的綁定事件的方法:

  1. 在DOM元素中直接綁定;
  2. 在JavaScript代碼中綁定;
  3. 綁定事件監聽函數。

一. 在DOM元素中直接綁定

這里的DOM元素,可以理解為HTML標簽。JavaScript支持在標簽中直接綁定事件,語法為:
    onXXX="JavaScript Code"

其中:

  • onXXX 為事件名稱。例如,鼠標單擊事件 onclick ,鼠標雙擊事件 ondouble,鼠標移入事件 onmouseover,鼠標移出事件 onmouseout 等。
  • JavaScript Code 為處理事件的JavaScript代碼,一般是函數。


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

1. 原生函數

  1. <input onclick="alert('謝謝支持')" type="button" value="點擊我,彈出警告框" />

實例演示:


2. 自定義函數

  1. <input onclick="myAlert()" type="button" value="點擊我,彈出警告框" />
  2. <script type="text/javascript">
  3. function myAlert(){
  4. alert("謝謝支持");
  5. }
  6. </script>

實例演示:

二. 在JavaScript代碼中綁定

在JavaScript代碼中(即<script>標簽內)綁定事件可以使JavaScript代碼與HTML標簽分離,文檔結構清晰,便於管理和開發。

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

其中:

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


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

  1. <input id="demo" type="button" value="點擊我,顯示 type 屬性" />
  2. <script type="text/javascript">
  3. document.getElementById("demo").onclick=function(){
  4. alert(this.getAttribute("type")); // this 指當前發生事件的HTML元素,這里是<div>標簽
  5. }
  6. </script>

實例演示:

三. 綁定事件監聽函數

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

addEventListener()函數語法:
elementObject.addEventListener(eventName,handle,useCapture);

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


attachEvent()函數語法:
elementObject.attachEvent(eventName,handle);

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


注意:事件句柄函數是指“ 函數名 ”,不能帶小括號。

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

下面綁定事件的代碼,進行了兼容性處理,能夠被所有瀏覽器支持:

  1. function addEvent(obj,type,handle){
  2. try{ // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
  3. obj.addEventListener(type,handle,false);
  4. }catch(e){
  5. try{ // IE8.0及其以下版本
  6. obj.attachEvent('on' + type,handle);
  7. }catch(e){ // 早期瀏覽器
  8. obj['on' + type] = handle;
  9. }
  10. }
  11. }


這里使用 try{ ... } catch(e){ ... } 代替 if ... else... 語句,避免瀏覽器出現錯誤提示。

例如,為一個 id="demo" 的按鈕綁定事件,鼠標單擊時彈出警告框:

  1. addEvent(document.getElementById("demo"),"click",myAlert);
  2. function myAlert(){
  3. alert("又是一個警告框");
  4. }


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM