javascript 事件调用顺序

时间:2010-04-11 19:22:52  来源:第二电脑网  作者:第二电脑网

  第二电脑网导读:册的先执行。 FireFox: 不管何种方式,都是先注册的先执行。 但是 body 很奇怪,Html 标记里用属性注册的事件总是在最后执行(<body onmousedown="func()"),而且是在所有事件的最后(居然在 document 的后面!)。但是 js 语句注册的属性事件按上述规则执行(document.body.onmousedown=func)。 Opera: 不管何种方式,都是先...
  正文:

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"; "javascript 事件调用顺序"由第二电脑网原创提供,转载请注明:http://www.002pc.com/master/College/Programming/JavaScript/13577.html


关键字:

关于《javascript 事件调用顺序》文章的评论

站内搜索: 高级搜索

热门搜索: Windows style 系统 tr IP QQ CPU 安装 function 注册 if td