JS事件绑定的常用方式实例总结

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

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

// 绑定
document.body.addEventListener('click', bodyClick, false);
// 解绑
document.body.removeEventListener('click', bodyClick, 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

//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();