判断DOM加载完毕的几种方法
默认分类 2011-03-27 19:27:32
<
div class="Apple-style-span" style="border-collapse:separate;color:rgb(0, 0, 0);font-family:Simsun;font-style:normal;font-variant:normal;font-weight:normal;letter-spacing:normal;line-height:normal;orphans:2;text-align:-webkit-auto;text-indent:0px;text-transform:none;white-space:normal;widows:2;word-spacing:0px;font-size:medium;">
<
div class="dp-highlighter" style="font-family:Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Consolas, 'Courier New', monospace;font-size:12px;background-color:transparent;overflow-x:auto;overflow-y:auto;margin-left:9px;padding-top:1px;padding-right:1px;padding-bottom:1px;padding-left:1px;word-break:break-all;word-wrap:break-word;">
转载:
通常来说,window.onload就够用了,如果想加载多个事件,我们可以采取以下方式:
- window.onload = function(){
- func1();
- func2();
- func3();
-
- }
但如果由于某种特殊需要,我们不能合在一起写吗?如当前区域是面向管理员,后台生成页面时只有当用户是管理员,页面才生成这部分,而这部分也用到一些特殊的脚本,上面的方法就歇菜了!
-
- <script type="text/javascript">
- window.onload = function(){
- func1();
- func2();
-
- }
- </script>
- <%# 以下脚本是为管理员准备的 %>
- <%if@user.role == "manager" %>
- window.onload = function(){
- func1();
- func2();
-
- }
- <% end %>
这种情况生成出来的页面拥有两个window.onload代码块,很显然,第二个覆盖掉第一个。这时,轮到loadEvent函数出场了。
- var loadEvent = function(fn) {
- var oldonload = window.onload;
- if (typeof window.onload != 'function') {
- window.onload = fn;
- }else {
- window.onload = function() {
- oldonload();
- fn();
- }
- }
- }
它非常完美地解决了互相覆盖的问题,用法如下:
loadEvent(func1);
loadEvent(func2);
loadEvent(func3);
//更多加载事件
但现实的问题总是如此出奇不意,也如此刁钻邪门。最近我想把所有的函数放到一个闭包中,以免除命名冲突之苦,比如那个有名的$的DOM选择器。JQuery,Prototype,mootool都用它做选择器的名字,共存成了个严重的问题。
- (function(){
- if(!window.JS){
- window['JS'] = {}
- }
- var onReady = function(fn){
- var oldonload = window.onload;
- if (typeof window.onload != 'function') {
- window.onload = fn;
- }else {
- window.onload = function() {
- oldonload();
- fn();
- }
- }
- }
- JS.onReady = onReady;
- var $ = function(id){
- return document.getElementById(id);
- }
- JS.$ = $;
- })()
test.htm
- <!doctype html>
- <html dir="ltr" lang="zh-CN">
- <head>
- <meta charset="utf-8"/>
- <meta http-equiv="X-UA-Compatible" content="IE=Edge">
- <title>闭包环境中的事件加载</title>
- <script type="text/javascript">
- (function(){
- if(!window.JS){
- window['JS'] = {}
- }
- var onReady = function(fn){
- var oldonload = window.onload;
- if (typeof window.onload != 'function') {
- window.onload = fn;
- }else {
- window.onload = function() {
- oldonload();
- fn();
- }
- }
- }
- JS.onReady = onReady;
- var $ = function(id){
- return document.getElementById(id);
- }
- JS.$ = $;
- })()
- JS.onReady(function(){
- var $ = JS.$;
- try{
- alert($("test").innerHTML);
- }catch(e){
- alert(e);
- }
- })
- </script>
- </head>
- <body>
- <p id="test">Test</p>
- </body>
- </html>
不过像这个如此有名的函数其实还有一个缺陷,就是新加载的函数被放置于前一个加载函数的作用域之用,加载函数越多,其栈的层次越深,显然性能耗很大。不过像onclick,onload,onmouseout等这样函数,W3C把它们归属于DOM0的事件模型,好处是适用范围广,但签于其性能,于是又提出DOM1.0 的事件模型与DOM2.0 的事件模型,DOM2就是原微软的事件模型与原网景的事件模型的合璧,既能捕获又能冒泡,而且多绑定多类型事件而不会导致后者覆盖前者。于是人们总搞出了有名的addEvent函数出来,我们用addEvent来改造我们的事件加载。
- (function(){
- if(!window.JS){
- window['JS'] = {}
- }
- var addEvent = function( obj, type, fn ) {
- if (obj.addEventListener)
- obj.addEventListener( type, fn,false );
- elseif (obj.attachEvent) {
- obj["e"+type+fn] = fn;
- obj.attachEvent( "on"+type, function() {
- obj["e"+type+fn]();
- } );
- }
- };
- var onReady = function(loadEvent,waitForImages) {
- if(waitForImages) {
- return addEvent(window, 'load', loadEvent);
- }
- }
- JS.onReady = onReady;
- var $ = function(id){
- return document.getElementById(id);
- }
- JS.$ = $;
- })()
-
test.htm
<
ol start="1" class="dp-j" style="border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-color:rgb(209, 215, 220);border-right-color:rgb(209, 215, 220);border-bottom-color:rgb(209, 215, 220);border-left-color:rgb(209, 215, 220);list-style-type:decimal;list-style-position:initial;list-style-image:initial;background-color:rgb(255, 255, 255);margin-top:0px;margin-right:0px;margin-bottom:1px;margin-left:0px;padding-top:2px;padding-right:0px;padding-bottom:2px;padding-left:0px;color:rgb(43, 145, 175);">
<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <title>闭包环境中的事件加载</title> <script type="text/javascript"> (function(){ if(!window.JS){ window['JS'] = {} } var addEvent = function( obj, type, fn ) { if (obj.addEventListener) obj.addEventListener( type, fn,false ); elseif (obj.attachEvent) { obj["e"+type+fn] = fn; obj.attachEvent( "on"+type, function() { obj"e"+type+fn; } ); } }; var onReady = function(loadEvent,waitForImages) { if(waitForImages) { return addEvent(window, 'load', loadEvent); } } JS.onReady = onReady; var $ = function(id){ return document.getElementById(id); } JS.$ = $; })() JS.onReady(function(){ alert(JS.$("test").innerHTML) <li class="alt" style="border-left-width:1px;border-left-style:solid;border-left-color:rgb(209, 215, 220);background
>>
留言评论