JavaScript中attachEvent与addEventListener的使用区别及事件冒泡原理

事件绑定方法的基本语法差异

在Firefox等标准浏览器中，绑定事件的标准语法为：对象名.addEventListener("事件名（不带ON前缀）", 函数名, true或false)。

在Internet Explorer旧版本中，绑定事件的语法为：对象名.attachEvent("事件名（带ON前缀）", 函数名)。

具体说明如下：

关于事件名称，需注意标准写法。例如，onclick应写为click，onblur应写为blur，即事件名不应包含"on"前缀。

useCapture参数与事件响应顺序

关于函数名，调用时不要添加括号。最后一个参数为布尔值，用于指定事件的响应顺序。下文将重点介绍addEventListener的第三个参数useCapture。若useCapture为true，浏览器采用捕获（Capture）模式；若为false，则采用冒泡（bubbling）模式。建议使用false，具体效果见下文示例。

HTML结构示例：

<div id="div_test"> <input type="button" id="btn_test" value="se4.cn技术基地" /> </div>

JavaScript逻辑示例：

 
window.onload=function(){ document.getElementById("div_test").addEventListener("click",test1,false); document.getElementById("btn_test").addEventListener("click",test2,false); } function test1(){ alert("外层div触发") } function test2(){ alert("内层input触发") }

读者可自行测试：若将useCapture设置为true，则test1（外层div）先触发；若设置为false，则test2（内层input）先触发。

接下来介绍attachEvent方法。

该方法较为常见，此处不再赘述基础用法，重点在于参数传递部分，后续结合实际应用场景再行讨论。

具体示例：

跨浏览器事件绑定与移除示例

创建事件绑定的兼容写法：

 
if (typeof document.addEventListener != "undefined") {
document.addEventListener("mousedown",_lhlclick,true);
} else {
document.attachEvent("onmousedown",_lhlclick);
} 

移除事件的兼容写法：

 
if (typeof document.addEventListener != "undefined") {
document.removeEventListener("mousedown",_lhlclick,true);
} else {
document.detachEvent("onmousedown",_lhlclick);
}