javascript:如何写$(document).ready像没有jquery的事件

Question

javascript:如何写$(document).ready像没有jquery的事件

gui*_* 桂林 32 javascript domready

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

注意:dom ready!= window onload

Answer 1

Pis*_*3.0 24

这是jQuery包装你正在寻找的函数的方式 - 代码片段不需要jQuery,并且是跨浏览器兼容的.我用yourcallback- 你需要定义的所有调用jQuery.ready().

这里发生了什么:

首先,DOMContentLoaded定义函数,该函数将在DOMContentLoaded事件触发时使用 - 它确保仅调用一次回调.
检查文档是否已加载 - 如果是,立即触发回调
否则嗅探功能(document.addEventListener/ document.attachEvent)并将回调绑定到它(IE和普通浏览器不同,加上onload回调)

从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 );

 }

Run Code Online (Sandbox Code Playgroud)

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

我得说这是很多复杂的代码，用于了解何时初始化使用 DOM 的脚本...就像我在答案中发布的那样，我只是在关闭主体标记之后调用一个初始化函数 (2认同)

Answer 2

sha*_*mas 9

有史以来最小的DOMReady代码.

<html>
  <head>
    <script>
      var ready = function (f) {
        (/complete|loaded|interactive/.test(document.readyState)) ?
            f() :
            setTimeout(ready, 9, f);
      };
    </script>
  </head>
  <body>
    <script>
      ready(function () {
        alert('DOM Ready!');
      });
    </script>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	14 年，10 月前
查看次数：	19218 次
最近记录：	11 年，1 月前