body元素的onload事件

最新推荐文章于 2022-05-26 16:54:21 发布

失落的羊

最新推荐文章于 2022-05-26 16:54:21 发布

阅读量1.4k

点赞数

分类专栏： ASP专题网站专题文章标签： javascript div function parsing html performance

网站专题同时被 2 个专栏收录

15 篇文章

订阅专栏

ASP专题

6 篇文章

订阅专栏

我们常常在网页加载完成时执行某些初始化程序，如设置某一div的innerText,获得某一个元素的引用等，通过会有以下的代码

-------------------------------------------------------------------------------------------------------------------------

<html><head>
<script type="text/javascript">
var oDiv = document.getElementById("div1");
oDiv.innerText = "欢迎光临";
</script>

</head><body>
<div id="div1"></div>
</body></html>

-------------------------------------------------------------------------------------------------------------------------

很遗憾的是，以上的JavaScript 并不能正确的运行，开始时我觉得很奇怪，明明div1是在的，为什么会发生
oDiv为空或不是对象的错误呢？后来查了一下资料，明白了，原来是html流的原因，即整个html页面是从头到尾顺序地加载的，因此当上面的JavaScript代码执行时，<div id="div1"></div> 这个元素并加载进来，错误自然会发生了。

defer,一个设计时可用的属性：
在解决以下的问题，当然后可以在body元素的onload事件中写代码，当对于script来说，还可以为脚本添加一个名为defer的属性，使JavaScript脚本在“整个页面加载完成”后才执行。像上面的代码，如果写成以下的样子，则会被正确的执行。
<html><head>
<script type="text/javascript" defer="true">
var oDiv = document.getElementById("div1");
oDiv.innerText = "欢迎光临";
</script>

</head><body>
<div id="div1"></div>
</body></html>

对于这个属性，微软有以下解释：
Using the attribute at design time can improve the download performance of a page because the browser does not need to parse and execute the script and can continue downloading and parsing the page instead.
所以这个说这个属性真正使用的地方并不会多。不过这有助于我们理解HTMl页面是如何加载到浏览器的。

body元素的onload事件
当然，最通过的初始化页面程序应该在body元素的onload事件中执行。
但前几天阅读《JavaScript DOM 编程艺术》作者Jeremy Keith 国际知名的web设计师，为我们提供了一个很好的功能函数。这使用我们不再显式地在body元素的onload事件上执行初始化函数（代码）。
作者提供的函数是：

function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload !='function'){
window.onload = func;
}else{
window.onload = function(){
oldonload();
func();
}
}
}

有了这个函数，方便多了，比如我们有几个函数，func1,func2,func3 都需要在body元素的onload事件中调用。
以前可以要这样写：
<body οnlοad="func1(),func2(),func3()"></body>
而使用这个辅助函数，我们可以在JavaScript代码中这样写了：
addLoadEvent(func1);
addLoadEvent(func2);
addLoadEvent(func3);
这种写法使页面的结构变得更为良好，同时使代码的灵活性更加强大的。不过，亦有一个缺点，如果func1有两个参数。如下的写法则是错误的！addLoadEvent(func1(para1,para2));解决问题的方法时将有参函数放到一个无参函数中调用，然后再在addLoadEvent中调用无参函数。

同时，从这个函数中可以看出，当我们将onload 事件写在body元素上时，真正执行的其实是window对象的onload事件。因素HTMl页面中没有window标题，所以就写在body元素上了。
对此，微软有这样一段解释：
The onload attribute of the body object sets an onload event handler for the window. This technique of calling the window onload event through the body object is overridden by any other means of invoking the window onload event, provided the handlers are in the same script language.