javascript 事件调用顺序

from: http://www.aspxuexi.com/javascript/2007-2-24/2222.htm

在 javascript 中两种方式注册的监听器以及先后注册的监听器调用的顺序在各个浏览器都有所不同，在这里总结一下 IE、firefox 以及 Opera 三种浏览器的调用方式：

IE:
通过属性注册的事件最先执行。
attachEvent 方式注册的事件后注册的先执行。

FireFox:
不管何种方式，都是先注册的先执行。
但是 body 很奇怪，Html 标记里用属性注册的事件总是在最后执行（<body onmousedown="func()"），而且是在所有事件的最后（居然在 document 的后面！）。但是 js 语句注册的属性事件按上述规则执行（document.body.onmousedown=func）。

Opera:
不管何种方式，都是先注册的先执行。

测试下面代码

<html>
<script>
function bodyLegacyEvent(){
document.getElementById("info").innerHTML+="<br/>body legacy event onmousedown";
}
function div1LegacyEvent(){
document.getElementById("info").innerHTML+="<br/>div1 legacy event onmousedown";
}
function documentLegacyEvent(){
document.getElementById("info").innerHTML+="<br/>document legacy event onmousedown";
}

function div0LegacyEvent(){
document.getElementById("info").innerHTML+="<br/>div0 legacy event onmousedown";
}
function mouseDown1(){
document.getElementById("info").innerHTML+="<br/>body mouseDown 1";
}
function mouseDown2(){
document.getElementById("info").innerHTML+="<br/>body mouseDown 2";
}
function documentMouseDown(){
document.getElementById("info").innerHTML+="<br/>documentMouseDown";
}
function div1MouseDown(){
document.getElementById("info").innerHTML+="<br/>div1 mouseDown";
}
function init(){
if(document.all){
document.body.attachEvent("onmousedown",mouseDown1);
document.body.attachEvent("onmousedown",mouseDown2);
document.attachEvent("onmousedown",documentMouseDown);
document.getElementById("d1").attachEvent("onmousedown",div1MouseDown);
}else{
document.body.addEventListener("mousedown",mouseDown1,false);
document.body.addEventListener("mousedown",mouseDown2,false);
document.addEventListener("mousedown",documentMouseDown,false);
document.getElementById("d1").addEventListener("mousedown",div1MouseDown,false);
}

document.onmousedown=documentLegacyEvent;
}
</script>
<body onload="init()" onmousedown="bodyLegacyEvent()">
<div id="d0" onmousedown="div0LegacyEvent()">
<div id="d1" onmousedown="div1LegacyEvent()">click here<br/>click here</div>
</div>
<div id="info"></div>
</body>
</html>

改用 js 动态注册 body 的属性事件，并且在最前面注册属性事件：

<html>
<script>
function bodyLegacyEvent(){
document.getElementById("info").innerHTML+="<br/>body legacy event onmousedown";
}
function div1LegacyEvent(){
document.getElementById("info").innerHTML+="<br/>div1 legacy event onmousedown";
}
function documentLegacyEvent(){
document.getElementById("info").innerHTML+="<br/>document legacy event onmousedown";
}

function div0LegacyEvent(){
document.getElementById("info").innerHTML+="<br/>div0 legacy event onmousedown";
}
function mouseDown1(){
document.getElementById("info").innerHTML+="<br/>body mouseDown 1";
}
function mouseDown2(){
document.getElementById("info").innerHTML+="<br/>body mouseDown 2";
}
function documentMouseDown(){
document.getElementById("info").innerHTML+="<br/>documentMouseDown";
}
function div1MouseDown(){
document.getElementById("info").innerHTML+="<br/>div1 mouseDown";
}
function init(){
document.onmousedown=documentLegacyEvent;
document.body.onmousedown=bodyLegacyEvent;
if(document.all){
document.body.attachEvent("onmousedown",mouseDown1);
document.body.attachEvent("onmousedown",mouseDown2);
document.attachEvent("onmousedown",documentMouseDown);
document.getElementById("d1").attachEvent("onmousedown",div1MouseDown);
}else{
document.body.addEventListener("mousedown",mouseDown1,false);
document.body.addEventListener("mousedown",mouseDown2,false);
document.addEventListener("mousedown",documentMouseDown,false);
document.getElementById("d1").addEventListener("mousedown",div1MouseDown,false);
}

}
</script>
<body onload="init()">
<div id="d0" onmousedown="div0LegacyEvent()">
<div id="d1" onmousedown="div1LegacyEvent()">click here<br/>click here</div>
</div>
<div id="info"></div>
</body>
</html>

比较三个浏览器里面的事件执行顺序，Firefox 和 Opera 比较相似，FireFox 仅在 body 元素上有点不符合常理，实际上我感觉要么是我还找不到规律，要么 FireFox 在处理 body 标记的属性事件上存在 bug。IE 的处理个人认为采用 stack 方式不怎么合理，后注册的事件会在最先运行，无法把握程序运行次序。

总结：避免和事件执行循序相关的代码，尽量让事件执行的顺序和程序流程无关。

from:asp学习网/title:javascript 事件调用顺序/ time:2007-2-24 21:10:29

javascript 事件调用顺序

相关文章