在JavaScript中，有三種常用的綁定事件的方法：
1.在DOM元素中直接綁定；
2.在JavaScript代碼中綁定；
3.綁定事件監(jiān)聽函數(shù)。
一、DOM元素中直接綁定
鼠標(biāo)單擊事件 onclick ，
鼠標(biāo)雙擊事件 ondouble，
鼠標(biāo)移入事件 onmouseover，
鼠標(biāo)移出事件 onmouseout 等。
二、JavaScript代碼中綁定
document.getElementById('XX').onclick=function(){};
三、綁定事件監(jiān)聽函數(shù)
1. obj.addEventListener(event,fn,useCapture);
useCapture →Boolean值 設(shè)置事件是事件捕獲執(zhí)行還是事件冒泡執(zhí)行，一般為事件捕獲（值為false）
2. attachEvent(event,fn);
addEventListener()是標(biāo)準(zhǔn)的綁定事件監(jiān)聽函數(shù)的方法，是W3C所支持的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持該函數(shù)；但是，IE8.0及其以下版本不支持該方法，它使用attachEvent()來綁定事件監(jiān)聽函數(shù)。所以，這種綁定事件的方法必須要處理瀏覽器兼容問題。
下面綁定事件的代碼，進(jìn)行了兼容性處理，能夠被所有瀏覽器支持：
functionaddEvent(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;
? ? ? ? }
? ? }
}
同一元素綁定多次事件
1. DOM元素直接綁定，如果DOM元素綁定兩個"onclick" 事件，只會執(zhí)行第一個；
2. 通過js腳本中綁定多個事件，只會執(zhí)行最后一個事件；
3. 用“addEventListener”綁定多個事件，按照綁定順序都會執(zhí)行。
下面擴展JQuery事件綁定的幾種方法
以click事件為例，jQuery中綁定事件有三種方法：
（1）obj.click(function(){});
（2）obj.bind("click",function(){});
（3）obj.live("click",function(){});
jQuery中提供了四種事件監(jiān)聽方式
分別是bind、live、delegate、on，對應(yīng)的解除監(jiān)聽的函數(shù)分別是unbind、die、undelegate、off；
【bind和live的區(qū)別】
live方法其實是bind方法的變種，其基本功能就同bind方法的功能是一樣的，都是為一個元素綁定某個事件，但是bind方法只能給當(dāng)前存在的元素綁定事件，對于事后采用JS等方式新生成的元素?zé)o效，而live方法則正好彌補了bind方法的這個缺陷，它可以對后生成的元素也可以綁定相應(yīng)的事件。
live方法之所以能對后生成的元素也綁定相應(yīng)的事件的原因歸結(jié)在“事件委托”上面，所謂“事件委托”就是指綁定在祖先元素上的事件可以在其后代元素上進(jìn)行使用。live方法的處理機制就是把事件綁定在DOM樹的根節(jié)點上，而不是直接綁定在某個元素上。
只有在事件發(fā)生的時候，live方法才會去檢測綁定事件的對象是否存在，所以live方法可以實現(xiàn)后來新增的元素也可實現(xiàn)事件的綁定。相比之下，bind會在事件在綁定階段就會判斷綁定事件的元素是否存在，而且只針對當(dāng)前元素進(jìn)行綁定，而不是綁定到父節(jié)點上。
