本文系统梳理JavaScript中事件绑定的三种主要方式：DOM元素内联绑定、JavaScript对象直接赋值以及使用addEventListener和attachEvent监听器。重点解析了针对IE8及以下版本的兼容处理逻辑，并对比了jQuery中on、bind、live、delegate等方法在动态元素绑定上的差异与适用场景。
近期整理了一些JavaScript事件绑定的实现方式，虽然未必涵盖所有场景，但旨在为后续查阅提供便利。
JavaScript事件绑定的三种核心方式
在JavaScript开发中，实现事件绑定的途径主要包含以下三种。
第一种方式是在DOM元素内部直接进行绑定。
第二种方式是在JavaScript代码层面直接进行绑定。
第三种方式是通过绑定事件监听函数来实现。
一、在DOM元素中直接绑定
该方法指直接在HTML标签中通过 onXXX 属性进行绑定。具体示例如下：
DOM元素内联绑定示例
<input type="button" value="点我呦" onclick="alert("hello world!")"/>
<!--或者-->
<input type="button" value="点我呦" onclick="testAlert()">
<script type="text/javascript">
function testAlert(){
alert("hello world!");
}
</script>二、在JavaScript代码中直接绑定
在JavaScript脚本中，通过获取DOM对象后，以 elementObject.onclick=function(){} 的形式进行绑定，具体示例如下：
JavaScript直接赋值绑定示例
<input type="button" value="点我呦" id="demo">
<script type="text/javascript">
document.getElementById("demo").onclick=function testAlert(){
alert("hello world!");
}
</script>三、绑定事件监听函数
此部分需重点掌握 addEventListener() 与 attachEvent() 的函数语法结构。
1. elementObject.addEventListener(eventName, handle, useCapture)（适用于主流浏览器及IE9.0及以上版本）
eventName：指定要绑定的事件名称。需注意书写格式，例如点击事件应写为 click，而非 onclick。
handle：指定处理事件的函数名。注意此处不添加小括号。
useCapture：布尔类型参数，用于指定是否使用捕获阶段，通常设置为 false，具体细节将在后文总结中涉及。
2. elementObject.attachEvent(eventName, handle)（仅适用于IE8及以下版本）
网络上提供了一种兼容性较好的解决方案。相较于传统的 if...else 判断，该方法采用 try...catch 错误处理机制，可有效避免浏览器弹出错误提示。
事件监听器及IE兼容处理
function addEvent(obj,type,handle){
try{
obj.addEventListener(type,handle,false);
}catch(e){
try{
obj.attachEvent('on'+type,handle);
}
catch(e){
obj['on' + type]=handle;//早期浏览器
}
}
}jQuery事件绑定方法对比
四、探讨jQuery中事件绑定的几种方法。
主要涉及 on()、bind()、live()、delegate() 等方法，对应的解绑方法分别为 off()、unbind()、undelegate()（注：live无直接对应解绑方法，通常指移除绑定）。
1. 在 on()、bind()、live()、delegate() 中，除 bind() 外，其余方法均支持为后续动态追加的元素对象添加事件绑定。
2. 上述各方法均有其对应的jQuery版本支持范围。
3. 在为动态添加的页面元素绑定事件时，通常推荐使用 on() 方法。
以上内容为关于JavaScript事件绑定方法的完整总结，感谢阅读。