当前位置导航:炫浪网>>网络学院>>网页制作>>JavaScript教程

JS的事件加载

通常来说,window.onload就够用了,如果想加载多个事件,我们可以采取以下方式:

1.window.onload = function(){
2.      
func1();
3.      
func2();
4.      
func3();
5.      
//更多加载事件………………
6.}
但如果由于某种特殊需要,我们不能合在一起写吗?如当前区域是面向管理员,后台生成页面时只有当用户是管理员,页面才生成这部分,而这部分也用到一些特殊的脚本,上面的方法就歇菜了!

01.//后台代码
02.<scrJavascript

OK,没问题。上面的onReady函数有一个可选参数,判断图片是否加载完毕。我们知道JS引擎会在完成DOM树后才开始处理图片与音频等东西,但如果我们的页面严重依赖于脚本布局呢?!我们想尽快让页面呈现出大体形态,这就用到domReady了。我们在原基础上改进它。

01.(function(){
02.   
if(!window.JS){
03.       
window['JS'] = {}
04.   
}
05.   
var addEvent = function( obj, type, fn ) {
06.       
if (obj.addEventListener)
07.           
obj.addEventListener( type, fn, false );
08.       
else if (obj.attachEvent) {
09.           
obj["e"+type+fn] = fn;
10.           
obj.attachEvent( "on"+type, function() {
11.               
obj["e"+type+fn]();
12.           
} );
13.       
}
14.   
};
15.   
var onReady = function(loadEvent,waitForImages) {
16.       
if(waitForImages) {
17.           
return addEvent(window, 'load', loadEvent);
18.       
}
19.       
var init = function() {
20.           
if (arguments.callee.done) return;
21.           
arguments.callee.done = true;
22.           
loadEvent.apply(document,arguments);
23.       
};
24.       
if(!+"\v1"){
25.           
(function(){
26.               
try {
27.                   
document.documentElement.doScroll("left");
28.               
} catch(e) {
29.                   
setTimeout( arguments.callee, 0 );
30.                   
return;
31.               
}
32.               
init();
33.           
})();
34.       
}else{
35.           
document.addEventListener( "DOMContentLoaded", function(){
36.               
document.removeEventListener( "DOMContentLoaded", arguments.callee, false );
37.               
init();
38.           
}, false );
39.       
}
40.       
return true;
41.   
}
42.   
JS.onReady = onReady;
43.   
var $ = function(id){
44.       
return document.getElementById(id);
45.   
}
46.   
JS.$ = $;
47.})()
dom标准浏览器用DOMContentLoaded,这是非常正现的W3C论DOM方法,与FF的DOMMouseScroll 不一样,基本上所有非IE内核的浏览器最新版都支持它了。IE下我们可以通过侦听document. documentElement. doScroll()来判断DOM树是否完成,原理是IE下只有当DOM树构建完成后才能doScroll。但它还不是尽善尽美,它在IE下无法判定iframe的内容是否加载完毕。我们继续改进它。

01.(function(){
02.   
if(!window.JS){
03.       
window['JS'] = {}
04.   
}
05.   
var addEvent = function( obj, type, fn ) {
06.       
if (obj.addEventListener)
07.           
obj.addEventListener( type, fn, false );
08.       
else if (obj.attachEvent) {
09.           
obj["e"+type+fn] = fn;
10.           
obj.attachEvent( "on"+type, function() {
11.               
obj["e"+type+fn]();
12.           
} );
13.       
}
14.   
};
15.   
var onReady = function(loadEvent,waitForImages) {
16.       
if(waitForImages) {
17.           
return addEvent(window, 'load', loadEvent);
18.       
}
19.       
var init = function() {
20.           
if (arguments.callee.done) return;
21.           
arguments.callee.done = true;
22.           
loadEvent.apply(document,arguments);
23.       
};
24.       
if(!+"\v1"){
25.           
if(window.self == window.top){
26.               
(function(){
27.                   
try {
28.                       
document.documentElement.doScroll("left");
29.                   
} catch(e) {
30.                       
setTimeout( arguments.callee, 0 );
31.                       
return;
32.                   
}
33.                   
init();
34.               
})();
35.           
}else{
36.               
document.attachEvent("onreadystatechange", function(){
37.                   
if ( document.readyState === "complete" ) {
38.                       
document.detachEvent( "onreadystatechange", arguments.callee );
39.                       
init();
40.                   
}
41.               
});
42.           
}
43.       
}else{
44.           
document.addEventListener( "DOMContentLoaded", function(){
45.               
document.removeEventListener( "DOMContentLoaded", arguments.callee, false );
46.               
init();
47.           
}, false );
48.       
}
49.       
return true;
50.   
}
51.   
JS.onReady = onReady;
52.   
var $ = function(id){
53.       
return document.getElementById(id);
54.   
}
55.   
JS.$ = $;
56.})()
我们简直是在重新实现jquery的$(document).ready(function(){ })!它功能非常强悍,配合利用闭包做成的命名空间,基本刀枪不入。而且它就只污染一个全局变量“JS”,可以与YUI媲美了(笑)。不过对于一般应用来说,我们用不着做到如此面面俱到。假如我们不需要对图片进行处理,页面也没有iframe,我们可以搞下面这个微缩版出来。

01.(function(){
02.   
if(!window.JS){
03.       
window['JS'] = {}
04.   
}
05.   
var onReady = function(loadEvent) {
06.       
if(!+"\v1"){
07.           
(function(){
08.               
try {
09.                   
document.documentElement.doScroll("left");
10.               
} catch(e) {
11.                   
setTimeout( arguments.callee, 0 );
12.                   
return;
13.               
}
14.               
loadEvent();
15.           
})();
16.       
}else{
17.           
document.addEventListener( "DOMContentLoaded", loadEvent, false );
18.       
}
19.   
}
20.   
JS.onReady = onReady;
21.   
var $ = function(id){
22.       
return document.getElementById(id);
23.   
}
24.   
JS.$ = $;
25.})()<!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(loadEvent) {
        if(!+"\v1"){
            (function(){
                try {
                    document.documentElement.doScroll("left");
                } catch(e) {
                    setTimeout( arguments.callee, 0 );
                    return;
                }
                loadEvent();
            })();
        }else{
            document.addEventListener( "DOMContentLoaded", loadEvent, false );
        }
    }
    JS.onReady = onReady;
    var $ = function(id){
        return document.getElementById(id);
    }
    JS.$ = $;
})()

JS.onReady(function(){
    alert(JS.$("test").innerHTML)
});
JS.onReady(function(){
    alert("dddddddddddddddd")
});
    </script>
  </head>
  <body>
    <p id="test">Test</p>
  </body>
</html>
 
运行代码

相关内容
赞助商链接