• javascript的事件加载


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

    window.onload = function(){
           func1();
           func2();
           func3();
           //更多加载事件………………
    }
    

    但是如果我们需要页面完全呈现前做一些东西呢,如通过脚本加载其他js文件,或在IE6实现fixed……这些东西就要用到domReady了,domReady好像是jQuery的叫做,一个加载函数。在W3C的草稿中,它其中是一种事件,名为 DOMContentLoaded。DOMContentLoaded事件比onload事件快许多,它是在DOM树建成之时就触发,而onload必须要等待页面所有元素的资源都下载完毕时才触发。在标准游览器中调用这个事件很简单的:

           document.addEventListener('DOMContentLoaded', function(){
              alert("DOM树建成了!")
            }, false);
    

    IE虽然有这么多私有事件,但却没有一个与它相同的,最接近的是readystatechange,加上其他乱七八糟的东西,我们还是能够模拟DOMContentLoaded的。

    有时我们加载事件时,可能不是单是通过一个函数就加载完的。比如我要用window.onload加载一段代码,但我还通过JS文件加载一个开源插件,那个插件当它要处理DOM,还是需要等到DOM树完成之时,因此它可能也要搞一个window.onload块。这时页面拥有两个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(handler1);
    loadEvent(handler2);
    loadEvent(handler3);
    

    在标准游览器中,因为有addEventListener,很轻松就实现DOMContentLoaded的多重加载,那IE怎么办?唯一的办法是,无论是addEventListener还是attachEvent都执行,把多个要加载的代码整合到一块,一次性执行。因此,我们需要一个数组。

    window.DOMLoadEvents = [];
    
    var addDOMLoadEvent = function(handler) {
    	window.DOMLoadEvents[window.DOMLoadEvents.length]=handler
    }
    
    addDOMLoadEvent(handler);
    addDOMLoadEvent(handler);
    addDOMLoadEvent(handler); 
    //更多加载事件
    

    那么怎样执行它们,上面仅仅是添加事件,我们需要另一个函数,专门用来执行它的。

        var fireContentLoadedEvent = function() {
            if (arguments.callee.loaded) return;
            //让此函数仅仅执行一次
            arguments.callee.loaded = true;
            var handlers = window.DOMLoadEvents,length = handlers.length;
            for (var i=0; i<length; i++) {
                var func = handlers[i];
                func();//执行要在domReady运行的代码
            }
        }
    

    那么我们要在什么时候执行上面的函数呢?我们仅讨论IE的情况。在IE中,任何DOM元素都有一个doScroll 方法,无论它们是否支持滚动条。为了判断DOM树是否建成,我们只看看documentElement是否完整就是,因为,它作为最外层的元素,作为DOM树的根部而存在,如果documentElement完整的话,就可以调用doScroll方法了。当页面一加载JS时,我们就执行此方法,当然要如果documentElement还不完整就会报错,我们在catch块中重新调用它,一直到成功执行,成功执行时就可以调用fireContentLoadedEvent 方法了。

    参数 描述
    scrollbarDown Default. Down scroll arrow is at the specified location
    scrollbarHThumb Horizontal scroll thumb or box is at the specified location
    scrollbarLeft Left scroll arrow is at the specified location
    scrollbarPageDown Page-down scroll bar shaft is at the specified location
    scrollbarPageLeft Page-left scroll bar shaft is at the specified location
    scrollbarPageRight Page-right scroll bar shaft is at the specified location
    scrollbarPageUp Page-up scroll bar shaft is at the specified location
    scrollbarRight Right scroll arrow is at the specified location
    scrollbarUp Up scroll arrow is at the specified location
    scrollbarVThumb Vertical scroll thumb or box is at the specified location
    down Composite reference to scrollbarDown
    left Composite reference to scrollbarLeft
    pageDown Composite reference to scrollbarPageDown.
    pageLeft Composite reference to scrollbarPageLeft.
    pageRight Composite reference to scrollbarPageRight.
    pageUp Composite reference to scrollbarPageUp.
    right Composite reference to scrollbarRight.
    up Composite reference to scrollbarUp.
        var  pollDoScroll = function() {
            try {
                document.documentElement.doScroll('left');
            }catch(e) {
                setTimeout(arguments.callee, 10);
                return;
            }
            fireContentLoadedEvent();
        }
    

    我们要页面加载JS立即执行此函数,是直接pollDoScroll()吗?!不要忘记,它只是应用于IE中,我们还要判定一下浏览器。如果支持addEventListener,也肯定支持DOMContentLoaded了(不考虑旧版本),否则就运行pollDoScroll函数。

    if (document.addEventListener) {
        document.addEventListener('DOMContentLoaded', fireContentLoadedEvent, false);
    } else {
        pollDoScroll();
    }
    

    完整的代码如下:

    window.DOMLoadEvents = [];
    var addDOMLoadEvent = function(handler) {
        window.DOMLoadEvents[window.DOMLoadEvents.length]=handler
    }
    var fireContentLoadedEvent = function() {
        if (arguments.callee.loaded) return;
        //让此函数仅仅执行一次
        arguments.callee.loaded = true;
        var handlers = window.DOMLoadEvents,length = handlers.length;
        for (var i=0; i<length; i++) {
            var func = handlers[i];
            func();//执行要在domReady运行的代码
        }
    }
    var pollDoScroll = function() {
        try {
            document.documentElement.doScroll('left');
        }catch(e) {
            setTimeout(arguments.callee, 10);
            return;
        }
        fireContentLoadedEvent();
    }
    if (document.addEventListener) {
        document.addEventListener('DOMContentLoaded', fireContentLoadedEvent, false);
    } else {
        pollDoScroll();
    }
    

  • 相关阅读:
    PHP实现微信开发中提现功能(企业付款到用户零钱)
    微信开发企业支付到银行卡PHP
    详解PHP实现定时任务的五种方法
    PHP实现执行定时任务的几种思路详解
    Laravel 去掉访问后面的 “public”
    laravel 中数据库查询结果自动转数组
    怎样才能去掉图片上的二维码
    用PS修改PNG格式图标的颜色
    消除浏览器对input输入框的自动填充
    知网---压缩传感研究现状
  • 原文地址:https://www.cnblogs.com/rubylouvre/p/1554204.html
Copyright © 2020-2023  润新知