window.onload加载

来源：互联网发布：淘宝的卖家中心在哪儿编辑：程序博客网时间：2024/05/21 12:04

最近在看事件绑定就是js高级教程里面的，按照教程写的一个js事件绑定

<script type="text/javascript"> var my = getElementById("mybtn");my. addEventListener('click',function(){       alert("xxxxx");},false)</script>

上面的代码就是绑定一个事件，代码写到了head中，运行了一下，没法应之前也遇到，今天刚看到解决办法，顺便把window.onload也复习了，主要问题就是代码执行的时候dom还没加载结束，所以就获取不到绑定的对象，就会引发错误，解决办法有两个，第一个就是写到html后面，顺序执行，第二个解决办法就是加一个windw.onload，但是有一个缺点就是要等到页面完全加载结束后才会执行，这对用户体验非常不好，因此学习了几种解决办法

第一种：

    <script>        function firstFunction(){            alert("hello firstFunction");        }        function secondFunction(){            alert("hello secondFunction");        }        function addEvent(fun){            var oldonload = window.onload;//代码核心部分            if(typeof window.onload !='function'){                window.onload = fun;//没有函数就给onload加上            }else{                window.onload = function(){                    oldonload();//这部分就是把调用的加上并执行之前的，后面的不执行                    fun();                }            }        }        addEvent(firstFunction);        addEvent(secondFunction);    </script>

这种方式后面还要自己手动调用，有的时候调用不存在的节点就会出错

第二种

    <script>        function one(){            alert("one");        }        function two(){            alert("b");        }        function addEvent(obj,EventName,callback){            if(obj.addEventListener){                obj.addEventListener(EventName,callback,false);            }else if(obj.attachEvent){                obj.attachEvent("on"+EventName,callback);            }else{                obj["on"+EventName]=callBack;            }        }        addEvent(window,'load',one);        addEvent(window,'load',two);    </script>

上面主要解决了不同浏览器使用绑定事件的方法

第三种

function a(){    alert("a");   }    function b(){    alert("b");   }    function addLoadListener(fn)   {     if (typeof window.addEventListener != 'undefined')    {    window.addEventListener('load', fn, false);     }     else if (typeof document.addEventListener != 'undefined')     {    document.addEventListener('load', fn, false);     }     else if (typeof window.attachEvent != 'undefined')  {    window.attachEvent('onload', fn);     }     else    {    var oldfn = window.onload;    if (typeof window.onload != 'function')    {   window.onload = fn;    }    else   {   window.onload = function()       {      oldfn();      fn();       };    }    }   }  addLoadListener(a);addLoadListener(b);

上面代码比较常用的，但是我觉得第一种方案我比较容易理解

引用其他方案：

后面有两种方案我看不太懂是从百度上copy下来的，等着慢慢研究，有理解较深刻的大神可以指点我一下

上代码

 /* * (c)2006 Jesse Skinner/Dean Edwards/Matthias Miller/John Resig * Special thanks to Dan Webb's domready.js Prototype extension * and Simon Willison's addLoadEvent * * For more info, see: * http://www.thefutureoftheweb.com/blog/adddomloadevent * http://dean.edwards.name/weblog/2006/06/again/ * http://www.vivabit.com/bollocks/2006/06/21/a-dom-ready-extension-for-prototype * http://simon.incutio.com/archive/2004/05/26/addLoadEvent *  * * To use: call addDOMLoadEvent one or more times with functions, ie:  * addDOMLoadEvent的调用方法，如下： *    function something() { *       // do something *    } *    addDOMLoadEvent(something); * *    addDOMLoadEvent(function() { *        // do other stuff *    }); * */ addDOMLoadEvent = (function(){     // create event function stack    var load_events = [],        load_timer,        script,        done,        exec,        old_onload,        init = function () {            done = true;             /*//停止调用计时器*/            // kill the timer            clearInterval(load_timer);             // execute each function in the stack in the order they were added            while (exec = load_events.shift())                exec();             if (script) script.onreadystatechange = '';        };     return function (func) {        // if the init function was already ran, just run this function now and stop        if (done) return func();         if (!load_events[0]) {             // for Mozilla/Opera9/*      DOMContentLoaded是firefox下特有的Event, 当所有DOM解析完以后会触发这个事件。    注册DOMContentLoaded事件，如果支持的话*/            if (document.addEventListener)                document.addEventListener("DOMContentLoaded", init, false);             // for Internet Explorer/*  对于IE则使用条件注释，并使用script标签的defer属性              IE中可以给script标签添加一个defer(延迟)属性，这样，标签中的脚本只有当DOM加载完毕后才执行*/             /*@cc_on @*/            /*@if (@_win32)                document.write("<script id=__ie_onload defer src=//0><\/scr"+"ipt>");                script = document.getElementById("__ie_onload");                script.onreadystatechange = function() {                    if (this.readyState == "complete")                        init(); // call the onload handler                };            /*@end @*/             // for Safari    /* 但对于Safari，我们需要使用setInterval方法不断检测document.readyState             当为loaded或complete的时候表明DOM已经加载完毕 */             if (/WebKit/i.test(navigator.userAgent)) { // sniff                load_timer = setInterval(function() {                    if (/loaded|complete/.test(document.readyState))                        init(); // call the onload handler                }, 10);            }             // for other browsers set the window.onload, but also execute the old window.onload            old_onload = window.onload;            window.onload = function() {                init();                if (old_onload) old_onload();            };        }         load_events.push(func);    }})();

/*! * contentloaded.js * * Author: Diego Perini (diego.perini at gmail.com) * Summary: cross-browser wrapper for DOMContentLoaded * Updated: 20101020 * License: MIT * Version: 1.2 * * URL: * http://javascript.nwbox.com/ContentLoaded/ * http://javascript.nwbox.com/ContentLoaded/MIT-LICENSE * */ // @win window reference// @fn function reference(function(win, doc) {contentLoaded=function(fn) {var done = false, top = true, doc = win.document, root = doc.documentElement, add = doc.addEventListener ? 'addEventListener' : 'attachEvent',rem = doc.addEventListener ? 'removeEventListener' : 'detachEvent',pre = doc.addEventListener ? '' : 'on', init = function(e) {if (e.type == 'readystatechange' && doc.readyState != 'complete') return;(e.type == 'load' ? win : doc)[rem](pre + e.type, init, false);if (!done && (done = true)) fn.call(win, e.type || e);}, poll = function() {try { root.doScroll('left'); } catch(e) { setTimeout(poll, 50); return; }init('poll');}; if (doc.readyState == 'complete') fn.call(win, 'lazy');else {if (doc.createEventObject && root.doScroll) {try { top = !win.frameElement; } catch(e) { }if (top) poll();}doc[add](pre + 'DOMContentLoaded', init, false);doc[add](pre + 'readystatechange', init, false);win[add](pre + 'load', init, false);} }})(window, document);<pre><h3>使用方法：</h3><pre lang="javascript" line="1">    //测试var $tt = (new Date).getTime();function timeElapsed(t) { return ((new Date()).getTime() - t); }contentLoaded(function (e) {document.body.style.backgroundColor = 'green';window.status =window.defaultStatus =' * ' + (e.type || e) + ' ' +' - ' + (e.eventType ? e.eventType : 'native') +' in ' + timeElapsed($tt) + ' ms.';}); //测试contentLoaded(    function(){var el=document.getElementById('logo');console.log(el);}    );

0 0