如果您想了解向window.onload添加两个功能的相关知识，那么本文是一篇不可错过的文章，我们将对window.onload可以写两个吗进行全面详尽的解释，并且为您提供关于$(document).
如果您想了解向window.onload添加两个功能的相关知识，那么本文是一篇不可错过的文章，我们将对window.onload可以写两个吗进行全面详尽的解释，并且为您提供关于 $(document).ready () 与 window.onload 的区别、$(document).ready() 与window.onload、$(document).ready和window.onload、$(window).load(function (){})的区别、document.onLoad 与 Body标签中加入onLoad 和 windows.onload的有价值的信息。
本文目录一览：- 向window.onload添加两个功能（window.onload可以写两个吗）
- $(document).ready () 与 window.onload 的区别
- $(document).ready() 与window.onload
- $(document).ready和window.onload、$(window).load(function (){})的区别
- document.onLoad 与 Body标签中加入onLoad 和 windows.onload
向window.onload添加两个功能（window.onload可以写两个吗）
我的表单上有两个功能，但如果另一个处于活动状态，则其中一个不起作用。这是我的代码：
window.onload = function(event) { var $input2 = document.getElementById(''dec''); var $input1 = document.getElementById(''parenta''); $input1.addEventListener(''keyup'', function() { $input2.value = $input1.value; });}window.onload=function(){ document.getElementById(''enable'').onchange=function(){ var txt = document.getElementById(''gov1''); if(this.checked) txt.disabled=false; else txt.disabled = true; };};我的意思是，当我同时拥有这两个功能时，第二个功能可以正常工作，但第一个功能不起作用，如果取出第二个功能，第一个功能将像正常情况一样工作，为什么会这样？是因为名字吗？
答案1
小编典典尝试将所有代码放入相同的（仅1个）onload方法中！
window.onload = function(){ // All code comes here }
$(document).ready () 与 window.onload 的区别
Jquery 中 $(document).ready () 的作用类似于传统 JavaScript 中的 window.onload 方法，不过与 window.onload 方法还是有区别的。
1. 执行时间
window.onload 必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready () 是 DOM 结构绘制完毕后就执行，不必等到加载完毕。
2. 编写个数不同
window.onload 不能同时编写多个，如果有多个 window.onload 方法，只会执行一个
$(document).ready () 可以同时编写多个，并且都可以得到执行
3. 简化写法
window.onload 没有简化写法
$(document).ready (function (){}) 可以简写成 $(function (){});
$(document).ready() 与window.onload
$(document).ready()的作用类似于JavaScript中的window.onload方法，但是与window.onload方法还是有区别的。
$(document).ready对于支持DOMContentLoaded时间的浏览器，会使用事件，所有的节点渲染完毕，就执行，可以调用多次，如果不支持则使用onload事件。
window.onload事件要等到所有资源加载完毕，如图片、视频、js脚本等，只能绑定一次，后面的绑定会覆盖前面所绑定的事件。
执行时间不同
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。
执行个数不同
window.onload不能同时编写多个，如果有多个window.onload方法，只会执行最后一个
$(document).ready()可以同时编写多个，并且都可以得到执行
简化写法
window.onload没有简化写法
$(document).ready(function(){})可以简写成$(function(){});
代码示范
window.onload = function(){
alert(“1”);
};
window.onload = function(){
alert(“2”);
};
能同时编写多个 但结果只输出第二个 没有简化写法
$(document).ready(function(){
alert(“Hello World”);
});
$(document).ready(function(){
alert(“Hello World”);
});
能同时编写多个 结果两次都输出
简化写法 $(function(){});
$(document).ready和window.onload、$(window).load(function (){})的区别
$(document).ready:是DOM结构绘制完毕后就执行，不必等到加载完毕。 意思就是DOM树加载完毕，就执行，不必等到页面中图片或其他外部文件都加载完毕。并且可以写多个.ready。
window.onload:是页面所有元素都加载完毕，包括图片等所有元素。只能执行一次。 所以，$(document).ready的执行时间要早于window.onload。并且可以写多个，看代码:
//以下代码无法正确执行：
window.onload = function()
{
alert(“text1”);
};
window.onload = function()
{
alert(“text2”);
};
//结果只输出第二个 能同时编写多个
//以下代码正确执行：
$(document).ready(function()
{
alert(“Hello World”);
});
$(document).ready(function()
{
alert(“Hello again”);
});
//结果两次都输出
如果需要获取DOM绑定元素的属性值时，最好使用window.onload,因为他是在所有元素加载完毕才执行，如果使用$(document).ready，DOM已经加载，但是DOM绑定的元素属性没有加载，所以属性不生效。要解决这个问题，可以使用 Jquery 中另一个关于页面加载的方法 ---load() 方法。 Load() 方法会在元素的 onload 事件中绑定一个处理函数。如果处理函数绑定给 window 对象，则会在所有内容 ( 包括窗口、框架、对象和图像等 ) 加载完毕后触发，如果处理函数绑定在元素上，则会在元素的内容加载完毕后触发。
//Jquery 代码如下：
$(window).load(function ()
{
});
//等价于 JavaScript 中的以下代码
Window.onload = function ()
{
}
总结：
1. window.onload=function(){}是等待所有的内容都加载完之后执行，比如图片，内容，js，css等。
2. $(function(){})，是等待DOM加载完之后执行（我的理解是标签绘制完毕之后），图片未加载完时也能执行。
3. $(function(){})是$(document).ready(function(){})的简写方式，功能是一样的。
4. $(window).load(function (){})也是等待所有的内容都加载完之后执行。
5. 不管是外链js还是页面中的js的window.onload都只执行最后的一个
6. $(window).load(function (){})可以有多个，而且都是顺序执行。
document.onLoad 与 Body标签中加入onLoad 和 windows.onload
问题： 我一直认为使用javascript的document.onLoad指定一个函数，跟在Body标签中加入onLoad是一样的 不过能过今天的示例发现，document.onLoad并不是在页面加载完成时引发。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script language="JavaScript">
function mytest1() {
console.log(''document'', new Date())
console.log(''document'', document.querySelector(''body''))
// alert(document.getElementById("my2"));
console.time()
}
document.onLoad = mytest1();
function mytest2() {
console.log(''body'', new Date())
console.log(''body'', document.querySelector(''body''))
console.log(''body img'', document.querySelector(''img''))
console.timeEnd()
console.time()
// alert(document.getElementById("my2"));
}
function mytest3() {
console.log(''img'', new Date())
console.log(''img'', document.querySelector(''img''))
console.timeEnd()
// alert(document.getElementById("my2"));
}
</script>
</head>
<body onload="mytest2()">
<p id="my2" >测试内容</p>
<img onload="mytest3()" src="./logo.png"/>
</body>
</html>调用 docuemnt.onload 指的是这个文档元素加载完成时，仅当DOM加载完成，不包括它子元素，
他们的顺序是 docuemnt.onload > body 内部的元素的onload > body onload
而且，windows.onload 就是 body onload 因为，他们应该是同一个方法
body 标签上的 onload="mytest2()" 方法会覆盖，windows.onload 赋值方法
如果，windows.onload 是在 加载完成body 标签之后赋值的 会覆盖 body 标签上的 onload 方法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script language="JavaScript">
function mytest1() {
console.log(''document'', new Date())
console.log(''document'', document.querySelector(''body''))
// alert(document.getElementById("my2"));
}
document.onLoad = mytest1();
function mytest2() {
console.log(''body'', new Date())
console.log(''body'', document.querySelector(''body''))
console.log(''body img'', document.querySelector(''img''))
// alert(document.getElementById("my2"));
}
function mytest3() {
console.log(''img'', new Date())
console.log(''img'', document.querySelector(''img''))
// alert(document.getElementById("my2"));
}
window.onload = function(){
console.log(''window'', new Date())
}
</script>
</head>
<body onload="mytest2()">
<p id="my2" >测试内容</p>
<img onload="mytest3()" src="./logo.png"/>
</body>
</html> 关于向window.onload添加两个功能和window.onload可以写两个吗的问题就给大家分享到这里，感谢你花时间阅读本站内容，更多关于 $(document).ready () 与 window.onload 的区别、$(document).ready() 与window.onload、$(document).ready和window.onload、$(window).load(function (){})的区别、document.onLoad 与 Body标签中加入onLoad 和 windows.onload等相关知识的信息别忘了在本站进行查找喔。
本文标签：
