JS 页面加载触发事件 document.ready和onload的区别

JavaScript024

JS 页面加载触发事件 document.ready和onload的区别,第1张

一、使用时机不同

1、onload：当用户进入页面时就会触发。

2、document.ready：是当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。

二、作用不同

1、onload：事件常用来检测访问者的浏览器类型和版本，然后根据这些信息载入特定版本的网页。

2、document.ready：是对向window.load事件注册事件的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用所绑定的函数。

三、作用不同

1、onload：常被用来处理用户进入或离开页面时所建立的 cookies。

2、document.ready：是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。

参考资料来源：百度百科-Javascript 事件

参考资料来源：百度百科-ready(fn)

一般来说，有4种方法：

1：直接把代码写在html里，例如:<body onload="functionA()functionB()">

2：写在页面的js里，例如：

window.onload = function () {

functionA()

functionB()

}

3：用绑定事件的方式绑定上去，例如：

function addListener (element, event, fn) {

if (window.attachEvent) {

element.attachEvent('on' + event, fn)

} else {

element.addEventListener(event, fn, false)

}

}

addListener(window, 'load', functionA)

addListener(window, 'load', functionB)

4：用第三方js框架（如jquery）来绑定事件，例如：

$("body").on("load",function(){

})

onload是js的原生的事件，而load则是这个程序中名为SpriteSheet的自定义类中自定义的一个方法（或者说是自定义的事件），两者之间没有必然的联系，如果程序编写者原意，他也可以把load改成其他名字。onload则是不能改的，它是js的内部事件名。