JS事件綁定的常用方式實例總結

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

直接在 dom 元素上進行綁定。
用 on 綁定。
用 addEventListener、attachEvent 綁定。
一、直接在 dom 元素上進行綁定

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

二、用 on 綁定
兼容性：在IE，FF，Chrome，Safari，Mozilla，Opera下都適用。

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

但是，同一個 dom 元素上，on 只能綁定一個同類型事件，後者會覆蓋前者，不同類型的事件可以綁定多個。
三、用 addEventListener、attachEvent 綁定
同一個 dom 元素上，用 addEventListener、attachEvent 可以綁定多個同類型事件。
但是，addEventListener 事件執行順序按照事件綁定的先後順序執行；attachEvent 事件執行順序則是隨機的。
addEventListener

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

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

addEventListener 的第三個參數若爲 false，函數在冒泡階段執行；若爲 true，函數在捕獲階段執行。默認爲 false。

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

box.addEventListener("click", function(){
  console.log("box");
}, false);
child.addEventListener("click", function(){
  console.log("child");
});
// 執行順序爲 child box

box.addEventListener("click", function(){
  console.log("box");
}, true);
child.addEventListener("click", function(){
  console.log("child");
});
// 執行順序爲 box child

兼容性
Chrome 和 FireFox 只支持 addEventListener；IE 只支持 attachEvent（IE11開始不支持了）。
所以必須對2種方法做兼容處理。原理是先判斷 attachEvent 是否爲真，如果爲真則用 attachEvent 綁定事件，否則用 addEventListener 綁定事件。
可以封裝一個函數做兼容性處理：

//dom綁定事件的元素，ev事件名，fn執行函數
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)
});

另外

以上三種方式綁定的點擊事件都可以用下面這條語句觸發

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

覺得不錯請點贊支持，歡迎留言或進我的個人羣855801563領取【架構資料專題目合集90期】、【BATJTMD大廠JAVA面試真題1000+】，本羣專用於學習交流技術、分享面試機會，拒絕廣告，我也會在羣內不定期答題、探討