JavaScript 事件调用顺序。
2006-11-16 23:59
169 查看
在 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("
13d94
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 方式不怎么合理，后注册的事件会在最先运行，无法把握程序运行次序。
总结：避免和事件执行循序相关的代码，尽量让事件执行的顺序和程序流程无关。
相关地址:
http://www.mmommo.com/?id=63
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("
13d94
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 方式不怎么合理，后注册的事件会在最先运行，无法把握程序运行次序。
总结：避免和事件执行循序相关的代码，尽量让事件执行的顺序和程序流程无关。
相关地址:
http://www.mmommo.com/?id=63
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- javascript 事件调用顺序
- JavaScript 事件调用顺序。
- 看懂此文，不再困惑于javascript中的事件绑定、事件冒泡、事件捕获和事件执行顺序
- JavaScript权威指南_168_第17章_事件处理_17.3-调用事件处理程序-返回值、调用顺序
- javascript中的事件绑定、事件冒泡、事件捕获和事件执行顺序
- JavaScript 事件顺序：冒泡和捕获
- Ext.Net系列:二Event之DirectEvent 示例1-调用事件顺序
- javascript 事件调用的总结
- JavaScript调用服务器事件
- Devexpress ASPxGridView事件调用顺序
- JavaScript调用Button的服务器端事件
- [JavaScript]jquery中各事件执行顺序
- JavaScript的 onclick 事件是如何调用jquery 方法的
- 键盘事件的调用顺序及获取键盘大小
- JavaScript调用Activex控件的事件的实现方法
- JavaScript中external与active host之间的事件调用机制
- javascript下对于事件、事件流、事件触发的顺序随便说说
- javascript调用ocx事件的方法
- JavaScript-父子dom同时绑定捕获冒泡点击事件时执行顺序
- 从零开始学_JavaScript_系列（八）——js系列<2>（事件触发顺序、文本读取、js编写ajax、输入验证、下拉菜单）