JavaScript 事件调用顺序。

来源：互联网发布：贝叶斯算法编辑：程序博客网时间：2024/05/02 06:17

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

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

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

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

测试下面代码

<html>

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>

<div id="d1" onmousedown="div1LegacyEvent()">click here<br/>click here</div>

</div>

</body>

</html>

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