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

JavaScript017

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的内部事件名。