在 javascript 中两种方式注册的监听器以及先后注册的监听器调用的顺序在各个浏览器都有所不同，在这里总结一下 IE、firefox 以及 Opera 三种浏览器的调用方式： auRLinux联盟
auRLinux联盟
IE: auRLinux联盟
通过属性注册的事件最先执行。 auRLinux联盟
attachEvent 方式注册的事件后注册的先执行。 auRLinux联盟
auRLinux联盟
FireFox: auRLinux联盟
不管何种方式，都是先注册的先执行。 auRLinux联盟
但是 body 很奇怪，Html 标记里用属性注册的事件总是在最后执行（<body onmousedown="func()"），而且是在所有事件的最后（居然在 document 的后面！）。但是 js 语句注册的属性事件按上述规则执行（document.body.onmousedown=func）。 auRLinux联盟
auRLinux联盟
Opera: auRLinux联盟
不管何种方式，都是先注册的先执行。 auRLinux联盟
auRLinux联盟
测试下面代码
<html> auRLinux联盟
<script> auRLinux联盟
function bodyLegacyEvent(){ auRLinux联盟
document.getElementById("info").innerHTML+="<br/>body legacy event onmousedown"; auRLinux联盟
} auRLinux联盟
function div1LegacyEvent(){ auRLinux联盟
document.getElementById("info").innerHTML+="<br/>div1 legacy event onmousedown"; auRLinux联盟
} auRLinux联盟
function documentLegacyEvent(){ auRLinux联盟
document.getElementById("info").innerHTML+="<br/>document legacy event onmousedown"; auRLinux联盟
} auRLinux联盟
auRLinux联盟
function div0LegacyEvent(){ auRLinux联盟
document.getElementById("info").innerHTML+="<br/>div0 legacy event onmousedown"; auRLinux联盟
} auRLinux联盟
function mouseDown1(){ auRLinux联盟
document.getElementById("info").innerHTML+="<br/>body mouseDown 1"; auRLinux联盟
} auRLinux联盟
function mouseDown2(){ auRLinux联盟
document.getElementById("info").innerHTML+="<br/>body mouseDown 2"; auRLinux联盟
} auRLinux联盟
function documentMouseDown(){ auRLinux联盟
document.getElementById("info").innerHTML+="<br/>documentMouseDown"; auRLinux联盟
} auRLinux联盟
function div1MouseDown(){ auRLinux联盟
document.getElementById("info").innerHTML+="<br/>div1 mouseDown"; auRLinux联盟
} auRLinux联盟
function init(){ auRLinux联盟
if(document.all){ auRLinux联盟
document.body.attachEvent("onmousedown",mouseDown1); auRLinux联盟
document.body.attachEvent("onmousedown",mouseDown2); auRLinux联盟
document.attachEvent("onmousedown",documentMouseDown); auRLinux联盟
document.getElementById("d1").attachEvent("onmousedown",div1MouseDown); auRLinux联盟
}else{ auRLinux联盟
document.body.addEventListener("mousedown",mouseDown1,false); auRLinux联盟
document.body.addEventListener("mousedown",mouseDown2,false); auRLinux联盟
document.addEventListener("mousedown",documentMouseDown,false); auRLinux联盟
document.getElementById("d1").addEventListener("mousedown",div1MouseDown,false); auRLinux联盟
} auRLinux联盟
auRLinux联盟
document.onmousedown=documentLegacyEvent; auRLinux联盟
} auRLinux联盟
</script> auRLinux联盟
<body onload="init()" onmousedown="bodyLegacyEvent()"> auRLinux联盟
<div id="d0" onmousedown="div0LegacyEvent()"> auRLinux联盟
<div id="d1" onmousedown="div1LegacyEvent()">click here<br/>click here</div> auRLinux联盟
</div> auRLinux联盟
<div id="info"></div> auRLinux联盟
</body> auRLinux联盟
</html>
改用 js 动态注册 body 的属性事件，并且在最前面注册属性事件：
<html> auRLinux联盟
<script> auRLinux联盟
function bodyLegacyEvent(){ auRLinux联盟
document.getElementById("info").innerHTML+="<br/>body legacy event onmousedown"; auRLinux联盟
} auRLinux联盟
function div1LegacyEvent(){ auRLinux联盟
document.getElementById("info").innerHTML+="<br/>div1 legacy event onmousedown"; auRLinux联盟
} auRLinux联盟
function documentLegacyEvent(){ auRLinux联盟
document.getElementById("info").innerHTML+="<br/>document legacy event onmousedown"; auRLinux联盟
} auRLinux联盟
auRLinux联盟
function div0LegacyEvent(){ auRLinux联盟
document.getElementById("info").innerHTML+="<br/>div0 legacy event onmousedown"; auRLinux联盟
} auRLinux联盟
function mouseDown1(){ auRLinux联盟
document.getElementById("info").innerHTML+="<br/>body mouseDown 1"; auRLinux联盟
} auRLinux联盟
function mouseDown2(){ auRLinux联盟
document.getElementById("info").innerHTML+="<br/>body mouseDown 2"; auRLinux联盟
} auRLinux联盟
function documentMouseDown(){ auRLinux联盟
document.getElementById("info").innerHTML+="<br/>documentMouseDown"; auRLinux联盟
} auRLinux联盟
function div1MouseDown(){ auRLinux联盟
document.getElementById("info").innerHTML+="<br/>div1 mouseDown"; auRLinux联盟
} auRLinux联盟
function init(){ auRLinux联盟
document.onmousedown=documentLegacyEvent; auRLinux联盟
document.body.onmousedown=bodyLegacyEvent; auRLinux联盟
if(document.all){ auRLinux联盟
document.body.attachEvent("onmousedown",mouseDown1); auRLinux联盟
document.body.attachEvent("onmousedown",mouseDown2); auRLinux联盟
document.attachEvent("onmousedown",documentMouseDown); auRLinux联盟
document.getElementById("d1").attachEvent("onmousedown",div1MouseDown); auRLinux联盟
}else{ auRLinux联盟
document.body.addEventListener("mousedown",mouseDown1,false); auRLinux联盟
document.body.addEventListener("mousedown",mouseDown2,false); auRLinux联盟
document.addEventListener("mousedown",documentMouseDown,false); auRLinux联盟
document.getElementById("d1").addEventListener("mousedown",div1MouseDown,false); auRLinux联盟
} auRLinux联盟
auRLinux联盟
} auRLinux联盟
</script> auRLinux联盟
<body onload="init()"> auRLinux联盟
<div id="d0" onmousedown="div0LegacyEvent()"> auRLinux联盟
<div id="d1" onmousedown="div1LegacyEvent()">click here<br/>click here</div> auRLinux联盟
</div> auRLinux联盟
<div id="info"></div> auRLinux联盟
</body> auRLinux联盟
</html>
比较三个浏览器里面的事件执行顺序，Firefox 和 Opera 比较相似，FireFox 仅在 body 元素上有点不符合常理，实际上我感觉要么是我还找不到规律，要么 FireFox 在处理 body 标记的属性事件上存在 bug。IE 的处理个人认为采用 stack 方式不怎么合理，后注册的事件会在最先运行，无法把握程序运行次序。 auRLinux联盟
auRLinux联盟
总结：避免和事件执行循序相关的代码，尽量让事件执行的顺序和程序流程无关。
Linux联盟收集整理 ,转贴请标明原始链接,如有任何疑问欢迎来本站Linux论坛讨论
