javascript 事件加载与预加载

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

复制代码代码如下:

　　window.onload = function(){

　　func1();

　　func2();

　　func3();

　　//更多加载事件………………

　　}

　　但如果由于某种特殊需要，我们不能合在一起写吗？如当前区域是面向管理员，后台生成页面时只有当用户是管理员，页面才生成这部分，而这部分也用到一些特殊的脚本，上面的方法就歇菜了！

复制代码代码如下:

　　//后台代码

　　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.$ = $;

　　})()

<!doctype html> 
<html dir="ltr" lang="zh-CN"> 
<head> 
<meta charset="gb2312"/> 
<meta http-equiv="X-UA-Compatible" content="IE=Edge"> 
<title>闭包环境中的事件加载</title> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0A(function()%7B%20%0D%0Aif(!window.JS)%7B%20%0D%0Awindow%5B'JS'%5D%20%3D%20%7B%7D%20%0D%0A%7D%20%0D%0Avar%20onReady%20%3D%20function(fn)%7B%20%0D%0Avar%20oldonload%20%3D%20window.onload%3B%20%0D%0Aif%20(typeof%20window.onload%20!%3D%20'function')%20%7B%20%0D%0Awindow.onload%20%3D%20fn%3B%20%0D%0A%7Delse%20%7B%20%0D%0Awindow.onload%20%3D%20function()%20%7B%20%0D%0Aoldonload()%3B%20%0D%0Afn()%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D%20%0D%0AJS.onReady%20%3D%20onReady%3B%20%0D%0Avar%20%24%20%3D%20function(id)%7B%20%0D%0Areturn%20document.getElementById(id)%3B%20%0D%0A%7D%20%0D%0AJS.%24%20%3D%20%24%3B%20%0D%0A%7D)()%20%0D%0AJS.onReady(function()%7B%20%0D%0Avar%20%24%20%3D%20JS.%24%3B%20%0D%0Atry%7B%20%0D%0Aalert(%24(%22test%22).innerHTML)%3B%20%0D%0A%7Dcatch(e)%7B%20%0D%0Aalert(e)%3B%20%0D%0A%7D%20%0D%0A%7D)%20%0D%0A%3C%2Fscript%3E"> 
</head> 
<body> 
<p id="test">Test</p> 
</body> 
</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

　　不过像这个如此有名的函数其实还有一个缺陷，就是新加载的函数被放置于前一个加载函数的作用域之用，加载函数越多，其栈的层次越深，显然性能耗很大。不过像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 );

　　else if (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.$ = $;

　　})()

<!doctype html> 
<html dir="ltr" lang="zh-CN"> 
<head> 
<meta charset="gb2312"/> 
<meta http-equiv="X-UA-Compatible" content="IE=Edge"> 
<title>闭包环境中的事件加载</title> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0A(function()%7B%20%0D%0Aif(!window.JS)%7B%20%0D%0Awindow%5B'JS'%5D%20%3D%20%7B%7D%20%0D%0A%7D%20%0D%0Avar%20addEvent%20%3D%20function(%20obj%2C%20type%2C%20fn%20)%20%7B%20%0D%0Aif%20(obj.addEventListener)%20%0D%0Aobj.addEventListener(%20type%2C%20fn%2C%20false%20)%3B%20%0D%0Aelse%20if%20(obj.attachEvent)%20%7B%20%0D%0Aobj%5B%22e%22%2Btype%2Bfn%5D%20%3D%20fn%3B%20%0D%0Aobj.attachEvent(%20%22on%22%2Btype%2C%20function()%20%7B%20%0D%0Aobj%5B%22e%22%2Btype%2Bfn%5D()%3B%20%0D%0A%7D%20)%3B%20%0D%0A%7D%20%0D%0A%7D%3B%20%0D%0Avar%20onReady%20%3D%20function(loadEvent%2CwaitForImages)%20%7B%20%0D%0Aif(waitForImages)%20%7B%20%0D%0Areturn%20addEvent(window%2C%20'load'%2C%20loadEvent)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0AJS.onReady%20%3D%20onReady%3B%20%0D%0Avar%20%24%20%3D%20function(id)%7B%20%0D%0Areturn%20document.getElementById(id)%3B%20%0D%0A%7D%20%0D%0AJS.%24%20%3D%20%24%3B%20%0D%0A%7D)()%20%0D%0A%0D%0AJS.onReady(function()%7B%20%0D%0Aalert(JS.%24(%22test%22).innerHTML)%20%0D%0A%7D%2Ctrue)%3B%20%0D%0AJS.onReady(function()%7B%20%0D%0Aalert(%22dddddddddddddddd%22)%20%0D%0A%7D%2Ctrue)%3B%20%0D%0A%3C%2Fscript%3E"> 
</head> 
<body> 
<p id="test">Test</p> 
</body> 
</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

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

复制代码代码如下:

　　(function(){

　　if(!window.JS){

　　window['JS'] = {}

　　}

　　var addEvent = function( obj, type, fn ) {

　　if (obj.addEventListener)

　　obj.addEventListener( type, fn, false );

　　else if (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);

　　}

　　var init = function() {

　　if (arguments.callee.done) return;

　　arguments.callee.done = true;

　　loadEvent.apply(document,arguments);

　　};

　　if(!+"\v1"){

　　(function(){

　　try {

　　document.documentElement.doScroll("left");

　　} catch(e) {

　　setTimeout( arguments.callee, 0 );

　　return;

　　}

　　init();

　　})();

　　}else{

　　document.addEventListener( "DOMContentLoaded", function(){

　　document.removeEventListener( "DOMContentLoaded", arguments.callee, false );

　　init();

　　}, false );

　　}

　　return true;

　　}

　　JS.onReady = onReady;

　　var $ = function(id){

　　return document.getElementById(id);

　　}

　　JS.$ = $;

　　})()

　　dom标准浏览器用DOMContentLoaded，这是非常正现的W3C论DOM方法，与FF的DOMMouseScroll 不一样，基本上所有非IE内核的浏览器最新版都支持它了。IE下我们可以通过侦听document. documentElement. doScroll()来判断DOM树是否完成，原理是IE下只有当DOM树构建完成后才能doScroll。但它还不是尽善尽美，它在IE下无法判定 iframe的内容是否加载完毕。我们继续改进它。

复制代码代码如下:

　　(function(){

　　if(!window.JS){

　　window['JS'] = {}

　　}

　　var addEvent = function( obj, type, fn ) {

　　if (obj.addEventListener)

　　obj.addEventListener( type, fn, false );

　　else if (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);

　　}

　　var init = function() {

　　if (arguments.callee.done) return;

　　arguments.callee.done = true;

　　loadEvent.apply(document,arguments);

　　};

　　if(!+"\v1"){

　　if(window.self == window.top){

　　(function(){

　　try {

　　document.documentElement.doScroll("left");

　　} catch(e) {

　　setTimeout( arguments.callee, 0 );

　　return;

　　}

　　init();

　　})();

　　}else{

　　document.attachEvent("onreadystatechange", function(){

　　if ( document.readyState === "complete" ) {

　　document.detachEvent( "onreadystatechange", arguments.callee );

　　init();

　　}

　　});

　　}

　　}else{

　　document.addEventListener( "DOMContentLoaded", function(){

　　document.removeEventListener( "DOMContentLoaded", arguments.callee, false );

　　init();

　　}, false );

　　}

　　return true;

　　}

　　JS.onReady = onReady;

　　var $ = function(id){

　　return document.getElementById(id);

　　}

　　JS.$ = $;

　　})()

　　我们简直是在重新实现jquery的$(document).ready(function(){ })！它功能非常强悍，配合利用闭包做成的命名空间，基本刀枪不入。而且它就只污染一个全局变量“JS”，可以与YUI媲美了（笑）。不过对于一般应用来说，我们用不着做到如此面面俱到。假如我们不需要对图片进行处理，页面也没有iframe，我们可以搞下面这个微缩版出来。

复制代码代码如下:

　　(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.$ = $;

　　})()

教程首页更多教程