javascript：如何在没有 jquery 的情况下编写 $(document).ready 之类的事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3989095/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
javascript:how to write $(document).ready like event without jquery
提问by u443966
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 $(document).ready(function) 或 $(function) 中，没有 jquery 我怎么能做同样的事情，我需要浏览器兼容，并允许附加多个函数。
Note: dom ready!= window onload
注意：dom ready!= window onload
采纳答案by Piskvor left the building
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.
这是 jQuery 包装您正在寻找的函数的方式 - 代码段不需要 jQuery，并且是跨浏览器兼容的。我已将所有对 jQuery.ready() 的调用替换为yourcallback- 您需要定义。
What goes on in here:
这里发生了什么：
- first, the function
DOMContentLoadedis 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)
- 首先，
DOMContentLoaded定义了函数，它将在 DOMContentLoaded 事件触发时使用——它确保回调只被调用一次。 - 检查文档是否已经加载 - 如果是，立即触发回调
- 否则嗅探特征 (
document.addEventListener/document.attachEvent) 并将回调绑定到它（IE 和普通浏览器不同，加上 onload 回调）
Lifted from jQuery 1.4.3, functions bindReady() and DOMContentLoaded:
从 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 );
}
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.
这是 51 行纯 JavaScript 代码，只是为了可靠地注册事件。据我所知，没有更简单的方法。将展示像 jQuery 这样的包装器的优点：它们包装了功能嗅探和丑陋的兼容性问题，以便您可以专注于其他事情。
回答by shawndumas
<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>
回答by Casey
This is all you need if you're supporting IE9+ and modern (2013) versions of Chrome, FF, Safari, etc.
如果您支持 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);
回答by user394424
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 setTimeoutcall. Once no exception is thrown, it calls the callback function.
很简单，它只是不断尝试将一个空<span>元素附加到document.body. 如果文档未“准备好”，则会抛出异常，在这种情况下，它会再次尝试使用新setTimeout调用。一旦没有异常抛出，它就会调用回调函数。
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.
我很高兴听到这种方法是否有任何问题。它对我来说效果很好，但我还没有进行任何流行的 Javascript 框架自然而然的广泛测试。
回答by Juan Mendes
I've seen lots of different ways of trying to do this. The simplest way (suggested by yahoo initially, I think) is to just call your initializer function after the close body tag, a bit obtrusive, but it's a single line.
我见过很多不同的方法来尝试做到这一点。最简单的方法（我认为是 yahoo 最初建议的）是在 close body 标签之后调用你的初始化函数，有点突兀，但它是一行。
回答by Matthew Vines
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 hereand herewith those in place you can perform a similar event attachment process on document instead of window.
DomReady 事件在 JavaScript 中不存在。您可以按照 Dean Edwards 等人在此处和此处所做的一些出色工作来实现您自己的工作，并且您可以在文档而不是窗口上执行类似的事件附件过程。
Check out user83421's answer to How do I add an additional window.onload event in Javascript
查看 user83421 对如何在 Javascript 中添加额外的 window.onload 事件的回答
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);
}
回答by steveBK
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.
我在“close body”标签之后和“close html”标签之前有这个。它工作得很好。加载预设功能将宽度、高度和位置值分配给 css div 标签。适用于不同的屏幕尺寸。
document.onreadystatechange = function () {
if (document.readyState == "interactive") {
loadPresets();
}
}
}
