本文實(shí)例講述了JS事件綁定的常用方式。分享給大家供大家參考，具體如下：

常用的事件綁定的幾種方式有三種：

• 直接在 dom 元素上進(jìn)行綁定。
• 用 on 綁定。
• 用 addEventListener、attachEvent 綁定。

一、直接在 dom 元素上進(jìn)行綁定

<input id="btn1" type="button" onclick="test();" />

二、用 on 綁定

兼容性：在IE，F(xiàn)F，Chrome，Safari，Mozilla，Opera下都適用。

// onclick綁定
document.body.onclick = () => {
  console.log(111)
}
// 解綁
document.body.onclick = null;

但是，同一個(gè) dom 元素上，on 只能綁定一個(gè)同類型事件，后者會(huì)覆蓋前者，不同類型的事件可以綁定多個(gè)。

三、用 addEventListener、attachEvent 綁定

同一個(gè) dom 元素上，用 addEventListener、attachEvent 可以綁定多個(gè)同類型事件。

但是，addEventListener 事件執(zhí)行順序按照事件綁定的先后順序執(zhí)行；attachEvent 事件執(zhí)行順序則是隨機(jī)的。

addEventListener

// 綁定
document.body.addEventListener('click', bodyClick, false);
// 解綁
document.body.removeEventListener('click', bodyClick, false);

注意：removeEventListener 第二個(gè)參數(shù)要和 addEventListener 指向同一個(gè)函數(shù)才能解綁成功。

addEventListener 的第三個(gè)參數(shù)若為 false，函數(shù)在冒泡階段執(zhí)行；若為 true，函數(shù)在捕獲階段執(zhí)行。默認(rèn)為 false。

<div id="box">
   <div id="child"></div>
</div>

box.addEventListener("click", function(){
  console.log("box");
}, false);
child.addEventListener("click", function(){
  console.log("child");
});
// 執(zhí)行順序?yàn)?child box

box.addEventListener("click", function(){
  console.log("box");
}, true);
child.addEventListener("click", function(){
  console.log("child");
});
// 執(zhí)行順序?yàn)?box child

兼容性

Chrome 和 FireFox 只支持 addEventListener；IE 只支持 attachEvent（IE11開(kāi)始不支持了）。

所以必須對(duì)2種方法做兼容處理。原理是先判斷 attachEvent 是否為真，如果為真則用 attachEvent 綁定事件，否則用 addEventListener 綁定事件。

可以封裝一個(gè)函數(shù)做兼容性處理：

//dom綁定事件的元素，ev事件名，fn執(zhí)行函數(shù)
function myAddEvent(dom, ev, fn){
  if(dom.attachEvent){
    dom.attachEvent("on"+ev, fn);
  }else {
    dom.addEventListener(ev, fn, false);
  }
}
myAddEvent(d1, "click", ()=>{
  console.log(1111)
});

另外

以上三種方式綁定的點(diǎn)擊事件都可以用下面這條語(yǔ)句觸發(fā)

document.getElementById("btn").click();

PS：關(guān)于javascript事件說(shuō)明可參考本站javascript事件與功能說(shuō)明大全：http://tools.jb51.net/table/javascript_event

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript操作DOM技巧總結(jié)》、《JavaScript頁(yè)面元素操作技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。