jQuery 事件綁定 和 JavaScript 原生事件綁定

總結一下：jQuery 事件綁定 和 JavaScript 原生事件綁定 及 區別

jQuery 事件綁定

jQuery 中提供了四種事件監聽綁定方式，分別是 bind、live、delegate、on，

對應的解除監聽的函數分別是 unbind、die、undelegate、off。

live、delegate 不多用，在Jquery1.7中已經移除，這里不多說

重點介紹 bind、on

 

bind(event,[data],function)

bind 是使用頻率較高的一種，作用就是在選擇到的元素上綁定特定事件類型的監聽函數，參數的含義如下：

event：事件類型，如 click、change、mouseover 等

data：傳入監聽函數的參數，通過 event.data 取到。可選

function：監聽函數，可傳入event對象，這里的event是 jQuery 封裝的 event 對象，與原生的event對象有區別，使用時需要注意

使用：$("#div li").bind("click",myFun);

 

on(event,childSelector,data,function)

on() 方法在被選元素及子元素上添加一個或多個事件處理程序。最常用的一種

自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。該方法給 API 帶來很多便利，我們推薦使用該方法，它簡化了 jQuery 代碼庫。

注意：使用 on() 方法添加的事件處理程序適用於當前及未來的元素（比如由腳本創建的新元素）。

提示：如需移除事件處理程序，請使用 off() 方法。

提示：如需添加只運行一次的事件然后移除，請使用 one() 方法。

event：必需。規定要從被選元素移除的一個或多個事件或命名空間。由空格分隔多個事件值，也可以是數組。必須是有效的事件。

childSelector：可選。規定只能添加到指定的子元素上的事件處理程序（且不是選擇器本身，比如已廢棄的 delegate() 方法）。

 data：可選。規定傳遞到函數的額外數據。

function：可選。規定當事件發生時運行的函數。

使用：$(selector).on(event,childSelector,data,function);

.click()、.trigger() 也有事件綁定效果

 

JavaScript 原生事件綁定

1.在DOM元素中直接綁定：這里的DOM元素，可以理解為HTML標簽。JavaScript支持在標簽中直接綁定事件

2.在JavaScript代碼中onXXX綁定：在JavaScript代碼中綁定事件可以使JavaScript代碼與HTML標簽分離，文檔結構清晰，便於管理和開發。

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

 

一. 在DOM元素中直接綁定

1. 原生函數

<input onclick="alert('謝謝支持')" type="button" value="點我" />

2. 自定義函數

<input onclick="myAlert()" type="button" value="點我" />

<script type="text/javascript">

　　function myAlert(){

　　　　alert("謝謝支持");

　　}

</script>

 

二. 在JavaScript代碼中onXXX綁定

在JavaScript代碼中綁定事件的語法為：

elementObject.onXXX=function(){

    // 事件處理代碼

}

其中：

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

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

<input id="demo" type="button" value="點擊我，顯示 type 屬性" />

<script type="text/javascript">

    document.getElementById("demo").onclick=function(){

        alert(this.getAttribute("type")); // this 指當前發生事件的HTML元素，這里是<div>標簽

}
</script>    

 

三. 綁定事件監聽函數

addEventListener()函數語法：

elementObject.addEventListener(eventName,handle,useCapture);

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

attachEvent()函數語法:（兼容IE）

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() 來綁定事件監聽函數。所以，這種綁定事件的方法必須要處理瀏覽器兼容問題。

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

function addEvent(obj,type,handle){

    try{ // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本

        obj.addEventListener(type,handle,false);

    }catch(e){

        try{ // IE8.0及其以下版本

            obj.attachEvent('on' + type,handle);

        }catch(e){ // 早期瀏覽器

            obj['on' + type] = handle;

        }

    }

}                    

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

例如，為一個 id="demo" 的按鈕綁定事件，鼠標單擊時彈出對話框：

 

var obj = document.getElementById("demo");
addEvent(obj ,"click",myAlert);

function myAlert(){

    alert("我是對話框");

}

 

 

jQuery 事件綁定和 JavaScript 事件綁定的區別

jQuery 中的事件綁定具有疊加性，JavaScript 的事件綁定則是可覆蓋的。

看一下示例代碼：

 /* jQuery 綁定事件 */ 
 2  $(".cnd").click(function(){  
    console.log("first")}  
  );  
 $(".cnd").click(function(){  
    console.log("second")}  
  );  
    
 $(".cnd").click(function(){  
    console.log("3rd")}  
  );  
    
 /* js 綁定事件 */
 var cm2 = document.getElementById("me2");  
 cm2.onclick=function(){  
      console.log("first");  
 };  
  cm2.onclick=function(){  
      console.log("second");  
  };  
  cm2.onclick=function(){  
      console.log("3rd");  
  };  

 

執行 jQuery 的 .cnd 點擊事件，控制台打印的是：

 

執行 js 的 cm2 點擊事件，控制台打印的是：

 

可以發現：

使用 jQuery 的事件綁定方法，對同一個元素的 click 事件先后綁定了三個處理函數，結果按順序都輸出了，說明了 jQuery 的事件處理函數是疊加的；

而使用 JavaScript 原生的事件綁定，可以發現只執行了最后一個相同的綁定事件，后面綁定的事件處理函數覆蓋了前面的事件處理函數。