JavaScript 事件绑定的三种常用方式及兼容性处理详解

JavaScript事件绑定概述

本文详细介绍JavaScript中几种常见的事件绑定实现方式，供开发者参考。

主要涵盖以下三种事件绑定方法：

• 直接在DOM元素内部进行绑定。
• 利用on属性进行绑定。
• 通过addEventListener或attachEvent方法进行绑定。

直接在DOM元素上绑定

一、直接在DOM元素上进行绑定

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

利用on属性绑定

二、利用on属性进行绑定

兼容性方面，该方法在IE、Firefox、Chrome、Safari、Mozilla及Opera等浏览器中均可使用。

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

需要注意的是，对于同一个DOM元素，on属性只能绑定一个同类型事件，后续绑定会覆盖之前的设置；但不同类型的事件可以分别绑定多个。

使用addEventListener与attachEvent绑定

三、通过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及以上版本已不再支持attachEvent）。

因此，必须对这两种方法进行兼容处理。基本思路是先判断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();

PS：关于JavaScript事件的详细说明，可参考本站javascript事件与功能说明大全：http://tools.jb51.net/table/javascript_event

更多关于JavaScript相关内容的读者，可查看本站专题：《JavaScript事件相关操作与技巧大全》、《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述内容对大家学习JavaScript程序设计有所帮助。