關於JavaScript的事件綁定

js事件綁定的幾種方式

JavaScript中有三種經常使用的綁定事件方法：

1. 在DOM元素中直接綁定；

2. 在JavaScript代碼中綁定；

3. 綁定事件佳妮婷函數。

1、在DOM元素中直接綁定

這裏的DOM元素指HTML標籤。JavaScript支持在標籤中直接綁定事件，語法：

onXXX = "JavaScript Code"

其中：

1)、onXXX爲事件名稱。如：鼠標單擊事件onclick，鼠標雙擊事件ondouble，鼠標移入事件onmouseover，鼠標移出事件onmouseout等。

2)、JavaScript Code爲處理事件的JavaScript代碼，通常是函數。

① 原生函數

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

② 自定義函數

<input onclick="myAlert()" type="button" value="點擊我，彈出警告框" />
<script type="text/javascript">
function myAlert(){
alert("謝謝支持");
}
</script>

2、在<script>元素中直接綁定

在JavaScript代碼中（即<script>標籤內）綁定事件可使JavaScript代碼與HTML標籤分離，文檔結構清晰，便於管理和開發。

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

elementObject.onXXX=function(){

 // 事件處理代碼

}

其中：

1)、elementObject 爲DOM對象，即DOM元素。

2)、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>

3、綁定事件監聽函數

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

一、addEventListener()函數語法：

elementObject.addEventListener(eventName,handle,useCapture);

1)、elementObject：DOM對象（即DOM元素）。

2)、eventName：事件名稱。注意，這裏的事件名稱沒有「 on 」，如鼠標單擊事件 click ，鼠標雙擊事件 doubleclick ，鼠標移入事件 mouseover，鼠標移出事件 mouseout 等。

3)、handle：事件句柄函數，即用來處理事件的函數。

4)、useCapture：Boolean類型，是否使用捕獲，通常用false 。

二、attachEvent()函數語法：

elementObject.attachEvent(eventName,handle);

1)、elementObject：DOM對象（即DOM元素）。

2)、eventName：事件名稱。注意，與addEventListener()不一樣，這裏的事件名稱有「 on 」，如鼠標單擊事件 onclick ，鼠標雙擊事件 ondoubleclick ，鼠標移入事件 onmouseover，鼠標移出事件 onmouseout 等。

3)、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" 的按鈕綁定事件，鼠標單擊時彈出警告框：

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

以上三種js綁定事件方式示例：

1. <div id="btn" onclick="clickone()"></div> //直接在DOM裏綁定事件
　　　　<script>
　　　　　function clickone(){ alert("hello"); }
　　　　</script>
2. <div id="btn"></div>
　　<script>
　　　　　document.getElementById("btn").onclick = function（）{ alert("hello"); }
 //腳本里面綁定
　　</script>
3. <div id="btn"></div>
　　<script>
　　　　　document.getElementById("btn").addeventlistener("click",clickone,false); 
//經過偵聽事件處理相應的函數
　　　　　function clickone(){ alert("hello"); }
　　</script>

用「addeventlistener」能夠綁定屢次同一個事件，且都會執行，而在DOM結構若是綁定兩個「onclick」事件，只會執行第一個；在腳本經過匿名函數的方式綁定的只會執行最後一個請求。

1. <div id="btn" onclick="clickone()" onclick="clicktwo()"></div> 
　　<script>
　　　　　function clickone(){ alert("hello"); } //執行這個
　　　　　function clicktwo(){ alert("world!"); }
　　</script>
2. <div id="btn"></div>
　　<script>
　　　　　document.getElementById("btn").onclick = function（）{ alert("hello"); }
　　　　　document.getElementById("btn").onclick = function（）{ alert("world"); } //執行這個
　　</script>
3. <div id="btn"></div>
　　<script>
　　　　　document.getElementById("btn").addeventlistener("click",clickone,false);
　　　　　function clickone(){ alert("hello"); } //先執行
　　　　　document.getElementById("btn").addeventlistener("click",clicktwo,false);
　　　　　function clicktwo(){ alert("world"); } //後執行
　　</script>

jQuery事件綁定

1、.bind()、.live()、.delegate()之間的區別

1) .bind()

$('a').bind('click', function() {alert('That tickles') });

這是最簡單的綁定方法。jQuery掃描文檔找出全部的$('a')元素，並把alert函數綁定到每一個元素的click事件上。

2) .live()

$('a').live('click',function(){alert('That tickles!)});

jQuery把alert函數綁定到$(document)元素上，並使用‘click’和‘a’做爲參數。任什麼時候候只要有事件冒泡到document節點上，它就查看該事件是不是一個click事件，以及該事件的目標元素與‘這一CSS選擇器是否匹配，若是都是的話，則執行函數。

live方法還能夠被綁定到具體的元素（或context）而不是document上，像這樣：

$('a',$('#container')[0]).live(...);

3) .delegate()

$('#container').delegate('a','click',function(){alert(」That tickles!")});

jQuery掃描文檔查找$('#container')，並使用click事件和‘a'這一CSS選擇器做爲參數把alert函數綁定到$('#container')上。任什麼時候候只要有事件冒泡到$('#container')上，它就查看該事件是不是click事件，以及該事件的目標元素是否與CSS選擇器相匹配。若是兩種檢查的結果都爲真的話，它就執行函數。

能夠注意到，這一過程與.live()相似，可是其把處理程序綁定到具體的元素而非document這一根上。

爲何.delegate()要比.live()好用？

基於幾個緣由，人們一般更願意選用jQuery的delegate方法而不是live方法。考慮下面的例子：

$('a').live('click', function() { blah() }); 
// 或者 
$(document).delegate('a', 'click', function() { blah() });

中止傳播

最後一個我想作的提醒與事件傳播有關。一般狀況下，咱們能夠經過使用這樣的事件方法來終止處理函數的執行：

$('a').bind('click', function(e) { 
　　e.preventDefault(); 
　　// 或者 
　　e.stopPropagation(); 
　});

2、比較和聯繫:

1.bind()函數只能針對已經存在的元素進行事件的設置；可是live(),on(),delegate()均支持將來新添加元素的事件設置；

2.bind()函數在jquery1.7版本之前比較受推崇，1.7版本出來以後，官方已經不推薦用bind()，替代函數爲on(),這也是1.7版本新添加的函數，一樣，能夠用來代替live()函數，live()函數在1.9版本已經刪除；

3.live()函數和delegate()函數二者相似，可是live()函數在執行速度，靈活性和CSS選擇器支持方面較delegate()差些。

4.bind()支持Jquery全部版本；live()支持jquery1.9-；delegate()支持jquery1.4.2+；on()支持jquery1.7+；

3、推薦使用.on()方法綁定，緣由有兩點：

1.on()方法能夠綁定動態添加到頁面元素的事件

好比動態添加到頁面的DOM元素，用.on()方法綁定的事件不須要關心註冊該事件的元素什麼時候被添加進來，也不須要重複綁定。有的同窗可能習慣於用.bind()、.live()或.delegate()，查看源碼就會發現，它們實際上調用的都是.on()方法，而且.live()方法在jQuery1.9版本已經被移除。

bind: function( types, data, fn ) {
    return this.on( types, null, data, fn );
},
live: function( types, data, fn ) {
    jQuery( this.context ).on( types, this.selector, data, fn );
    return this;
},
delegate: function( selector, types, data, fn ) {
    return this.on( types, selector, data, fn );
}

2.on()方法綁定事件能夠提高效率

測試：

假設頁面添加了5000個li，用chrome開發者工具Profiles測試頁面載入時間。

普通

$('li').click(function(){
    console.log(this)
});

普通綁定至關於在5000li上面分別註冊click事件，內存佔用約4.2M，綁定時間約爲72ms。

.on()綁定

$(document).on('click', 'li', function(){
    console.log(this)
})

.on()綁定利用事件代理，只在document上註冊了一個click事件，內存佔用約2.2M，綁定時間約爲1ms。

 

tip:若是你須要移除on()所綁定的方法，可使用off()方法處理。