window.onload使用指南

前端之家收集整理的这篇文章主要介绍了window.onload使用指南前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

网页中的javascript脚本代码往往需要在文档加载完成后才能够去执行,否则可能导致无法获取对象的情况,为了避免这种情况的发生,可以使用以下两种方式:

一.将脚本代码放在网页的低端,这样在运行脚本代码的时候,可以确保要操作的对象已经加载完成。 二.通过window.onload来执行脚本代码

第一种方式感觉比较凌乱(其实推荐使用),往往我们需要将脚本代码放在一个更为合适的地方,那么window.onload方式就是一个更好的选择。window.onload是一个事件,当文档加载完成之后就会触发该事件,可以为此事件注册事件处理函数,并将要执行的脚本代码放在事件处理函数中,于是就可以避免获取不到对象的情况。先看一段代码实例:

<Meta charset=" utf-8"> window.onload<a href="https://www.jb51.cc/tag/yongfa/" target="_blank" class="keywords">用法</a>

以上代码可以将为名myalert方法绑定到window.onload事件上,但是不能以以下方式为此事件绑定多个事件处理函数:

window.onload=function a(){} window.onload=function b(){}

以上代码并不能为window.onload事件绑定多个事件处理函数,而是最后一个会覆盖前面的所有函数。不过代码可以变通一下:

<Meta charset=" utf-8"> window.onload<a href="https://www.jb51.cc/tag/yongfa/" target="_blank" class="keywords">用法</a>

以上代码效果和使用addEventListener()函数效果是一样的,简单介绍一下语法格式:

addEventListener("type",函数名)

函数只有两个参数,第一个参数是事件类型,不过它和addEventListener()的第一个参数的作用是一样,但是名称有所区别,名称前面是具有"on",第二个参数就是要绑定的事件处理函数名称。为了兼容各浏览器,需要将以上代码进行改造,实例如下:

<Meta charset=" utf-8"> window.onload<a href="https://www.jb51.cc/tag/yongfa/" target="_blank" class="keywords">用法</a>