当前位置：文江博客话题详情

javascript:如何在没有jquery的情况下编写$(document).ready之类的事件

发布于 2024-09-28 11:29:26 字数 134 浏览 4 评论 0原文

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

注意：dom准备好！=窗口onload

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

◇流星雨 2024-10-05 11:29:26

这就是 jQuery 包装您正在寻找的函数的方式 - 该代码片段不需要 jQuery，并且是跨浏览器兼容的。我已将所有对 jQuery.ready() 的调用替换为 yourcallback - 您需要定义它。

这里发生了什么：

首先，定义函数 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 );

 }

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

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.

What goes on in here:

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)

Lifted from jQuery 1.4.3, functions bindReady() and 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 );

 }

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.

回复收藏 0 原文

月下凄凉 2024-10-05 11:29:26

有史以来最小的 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>

Smallest DOMReady code, ever.

<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>

回复收藏 0 原文

爱给你人给你 2024-10-05 11:29:26

如果您支持 IE9+ 和现代（2013）版本的 Chrome、FF、Safari 等，这就是您所需要的。

function ready(event) {
    // your code here
    console.log('The DOM is ready.', event);
    // clean up event binding
    window.removeEventListener('DOMContentLoaded', ready);
}

// bind to the load event
window.addEventListener('DOMContentLoaded', ready);

This is all you need if you're supporting IE9+ and modern (2013) versions of Chrome, FF, Safari, etc.

function ready(event) {
    // your code here
    console.log('The DOM is ready.', event);
    // clean up event binding
    window.removeEventListener('DOMContentLoaded', ready);
}

// bind to the load event
window.addEventListener('DOMContentLoaded', ready);

回复收藏 0 原文

蓝眸 2024-10-05 11:29:26

这是我使用的一种方法，它似乎工作可靠

function ready(func) {
  var span = document.createElement('span');
  var ms = 0;
  setTimeout(function() {
    try {
      document.body.appendChild(span);

      document.body.removeChild(span);

      //Still here? Then document is ready
      func();
    } catch(e) {
      //Whoops, document is not ready yet, try again...

      setTimeout(arguments.callee, ms);
    }
  }, ms);
}

非常简单，它只是不断尝试将一个空的元素附加到 document.body 中。如果文档未“准备好”，则会抛出异常，在这种情况下，它将使用新的 setTimeout 调用再次尝试。一旦没有抛出异常，就会调用回调函数。

我很高兴听到此方法是否有任何问题。它对我来说效果很好，但我还没有进行任何流行的 Javascript 框架都应该进行的广泛测试。

Here's a method I use that seems to work reliably

function ready(func) {
  var span = document.createElement('span');
  var ms = 0;
  setTimeout(function() {
    try {
      document.body.appendChild(span);

      document.body.removeChild(span);

      //Still here? Then document is ready
      func();
    } catch(e) {
      //Whoops, document is not ready yet, try again...

      setTimeout(arguments.callee, ms);
    }
  }, ms);
}

Pretty simple, it just keeps trying to append an empty <span> element to document.body. If the document is not "ready" an exception will be thrown, in which case it tries again with a new setTimeout call. Once no exception is thrown, it calls the callback function.

I'd be happy to hear if there are any problems with this method. It has worked well for me, but I have not done the extensive testing that would be natural to any popular Javascript framework.

回复收藏 0 原文

旧人 2024-10-05 11:29:26

我见过很多不同的方法来尝试做到这一点。最简单的方法（我认为最初由雅虎建议）是在关闭正文标记之后调用初始化函数，有点唐突，但它是一行。

回复收藏 0 原文

情愿 2024-10-05 11:29:26

编辑

DomReady 事件在 JavaScript 中本身不存在。您可以通过关注 Dean Edwards 此处和此处有了这些，您就可以执行类似的事件附件在文档而不是窗口上进行处理。

查看 user83421 对 How我是否需要在 Javascript 中添加一个额外的 window.onload 事件

在这里也回顾一下。

if (window.addEventListener) // W3C standard
{
  window.addEventListener('load', myFunction, false); // NB **not** 'onload'
} 
else if (window.attachEvent) // Microsoft
{
  window.attachEvent('onload', myFunction);
}

Edit

The DomReady event does not exist nativly in javascript. You can implement your own by following some wonderful work done by people like Dean Edwards here and here with those in place you can perform a similar event attachment process on document instead of window.

Check out user83421's answer to How do I add an additional window.onload event in Javascript

To recap here as well.

if (window.addEventListener) // W3C standard
{
  window.addEventListener('load', myFunction, false); // NB **not** 'onload'
} 
else if (window.attachEvent) // Microsoft
{
  window.attachEvent('onload', myFunction);
}

回复收藏 0 原文

闻呓 2024-10-05 11:29:26

我在“close body”标签之后和“close html”标签之前有这个。而且效果很好。加载预设功能将宽度、高度和位置值分配给 css div 标签。对于不同的屏幕尺寸很有用。

document.onreadystatechange = function () {
if  (document.readyState == "interactive") {
loadPresets();
}

}

I have this after the 'close body' tag and before the 'close html' tag. and it works pretty well. The load presets function assigns width,height and position values to css div tags. useful for different screen sizes.

document.onreadystatechange = function () {
if  (document.readyState == "interactive") {
loadPresets();
}

}

回复收藏 0 原文

~没有更多了~

关于作者

橘亓

暂无简介

0 文章

0 评论

24 人气

关注发私信

友情链接

文江博客

javascript:如何在没有jquery的情况下编写$(document).ready之类的事件

注意：dom准备好！=窗口onload

Note: dom ready!= window onload

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（7）

编辑

Edit

关于作者

相关话题

热门标签

推荐作者

胡图图

zt006

z祗昰~

冰葑

野の

天空

友情链接

javascript:如何在没有jquery的情况下编写$(document).ready之类的事件

注意：dom准备好！=窗口onload

Note: dom ready!= window onload

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（7）

编辑

Edit

关于作者

相关话题

热门标签

推荐作者

胡图图

zt006

z祗昰~

冰葑

野の

天空

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。