javascript：如何写$（document）.ready像没有jquery的事件 [英] javascript:how to write $(document).ready like event without jquery

问题描述

在jquery $（document）.ready（function）或$（function）中，如果没有jquery，我怎么能做同样的事情，我需要浏览器兼容，并允许附加多个函数。

in jquery $(document).ready(function) or $(function) , how could I do the same thing without jquery, and I need browser compatiable, and allow to attach more than one function.

推荐答案

这是jQuery包装的方式您正在寻找的功能 - 该代码段不需要jQuery，并且是跨浏览器兼容的。我用 yourcallback 替换了对jQuery.ready（）的所有调用 - 你需要定义它。

This is the way jQuery wraps the functions you're looking for - the snippet does not need jQuery, and is cross-browser compatible. I've replaced all calls to jQuery.ready() with yourcallback - which you need to define.

什么继续在这里：

• 首先，定义函数 DOMContentLoaded ，这将是在DOMContentLoaded事件触发时使用它 - 它确保只调用一次回调。


• 检查文档是否已经加载 - 如果是，立即触发回调


• 否则嗅探功能（ document.addEventListener / document.attachEvent ）并绑定回调它（IE和普通浏览器不同，加上onload回调）

• first, the function DOMContentLoaded is defined, which will be used when the DOMContentLoaded event fires - it ensures that the callback is only called once.
• a check if the document is already loaded - if yes, fire the callback right away
• otherwise sniff for features (document.addEventListener / document.attachEvent) and bind the callbacks to it (different for IE and normal browsers, plus the onload callback)

取决于jQuery 1.4.3，函数bindReady（）和DOMContentLoaded ：

/*
* Copyright 2010, John Resig
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*/
// Cleanup functions for the document ready method
// attached in the bindReady handler
if ( document.addEventListener ) {
DOMContentLoaded = function() {
    document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false );
    //jQuery.ready();
            yourcallback();
};

} else if ( document.attachEvent ) {
DOMContentLoaded = function() {
    // Make sure body exists, at least, in case IE gets a little overzealous 
            if ( document.readyState === "complete" ) {
        document.detachEvent( "onreadystatechange", DOMContentLoaded );
        //jQuery.ready();
                    yourcallback();
    }
    };
}

// Catch cases where $(document).ready() is called after the
// browser event has already occurred.
if ( document.readyState === "complete" ) {
    // Handle it asynchronously to allow scripts the opportunity to delay ready
//return setTimeout( jQuery.ready, 1 );
    // ^^ you may want to call *your* function here, similarly for the other calls to jQuery.ready
    setTimeout( yourcallback, 1 );
}

// Mozilla, Opera and webkit nightlies currently support this event
if ( document.addEventListener ) {
    // Use the handy event callback
document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
// A fallback to window.onload, that will always work
//window.addEventListener( "load", jQuery.ready, false );
    window.addEventListener( "load", yourcallback, false );
 // If IE event model is used
 } else if ( document.attachEvent ) {
        // ensure firing before onload,
        // maybe late but safe also for iframes
        document.attachEvent("onreadystatechange", DOMContentLoaded);

        // A fallback to window.onload, that will always work
        window.attachEvent( "onload", yourcallback );

 }

这是51行纯JavaScript代码，只是为了注册事件可靠。据我所知，没有比较简单的方法了。去展示像jQuery这样的包装器有什么用处：它们包含功能嗅探和丑陋的兼容性问题，以便您可以专注于其他事情。

That's 51 lines of pure JavaScript code, just to register the event reliably. As far as I know, there is no easier method. Goes to show what the wrappers like jQuery are good for: they wrap the capability sniffing and ugly compatibility issues so that you can focus on something else.

这篇关于javascript：如何写$（document）.ready像没有jquery的事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！