JavaScript attachEvent 用法详解与事件执行顺序

作者:窗边听雨时间:2026-10-29 09:50:57浏览:511

本文分析JavaScript中attachEvent方法的用法。通过对比onclick直接赋值、attachEvent及addEventListener三种方式,重点阐述在IE浏览器中同一元素绑定多个同一事件时的执行顺序(倒序),并指出其兼容性问题及标准方法的替代方案。

attachEvent方法概述

本文通过具体实例解析JavaScript中attachEvent方法的使用,旨在为读者提供参考。

在JavaScript开发中,常规的事件绑定方式如下所示:

obj.onclick=method

传统绑定方式的局限性

这种绑定方式兼容主流浏览器,但如果对同一个元素多次绑定同一事件,会出现什么情况呢?


obj.onclick=method1
obj.onclick=method2
obj.onclick=method3

IE中attachEvent的使用与执行顺序

若采用上述写法,后续绑定的事件会覆盖之前的设置,最终仅执行最后绑定的方法(如method3)。此时,简单的onclick赋值方式已无法满足需求,需要引入IE特有的attachEvent方法。


btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);

attachEvent的使用格式为:事件类型前需加上“on”前缀,例如onclick、onsubmit或onchange。其事件触发的执行顺序为:

method3 -> method2 -> method1

标准方法addEventListener的对比

需要注意的是,attachEvent是微软私有方法,Firefox等其他浏览器并不支持。幸运的是,这些浏览器均支持W3C标准的addEventListener方法。


btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);

使用addEventListener时,事件的执行顺序为:method1 -> method2 -> method3


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>attachEvent</title>
<script type="text/javascript">
//第一种方式(微软的私人方法)
function iniEvent() {
  var btn = document.getElementById("btn");
  btn.attachEvent("onclick", click1);
  btn.attachEvent("onclick", click2);
  btn.attachEvent("onclick", click3);
}
//第二种方式(火狐和其他浏览器)
function iniEvent2() {
  var btn = document.getElementById("btn");
  btn.addEventListener("click", click1, false);
  btn.addEventListener("click", click2, false);
  btn.addEventListener("click", click3, false);
}
function click1() {
  alert('click1');
}
function click2() {
  alert('click2');
}
function click3() {
  alert('click3');
}
</script>
</head>
<body onload="iniEvent()">
<input type="button" id="btn" value="attachEvent" />
</body>
</html>

希望上述关于JavaScript程序设计的分析能对大家有所帮助。

作者最新文章