UI事件之load

load事件属于CSS3规范中的UI事件，load事件处理程序在页面元素和资源（html/script/link/img等）全部加载完成后在window上触发，或在img元素加载完成后再img元素上触发。可以用HTML特性的方式在body元素上绑定load事件，也可以用JavaScript在window上绑定load，所有浏览器都实现了在document上触发load事件，但它们也都支持在window上触发load，以保证向后兼容。

<html>
<head></head>
<!-- html特性方式 -->
<body onload="alert(loaded!)"></body>
</html>

//javascript方式---推荐
<script>
EventUtil.addEvent(window,'load',function(event){
    alert('loaded!');
});
</script>

上面的代码中，event对象不包含任何事件相关信息，在支持DOM的浏览器中，event.target指向document，在ie8中，不提供srcElement属性。

下面写几个图片加载完成后触发的load事件，并说明其中的差异：

例1：对DOM结构中的img元素绑定load事件处理程序

var oImg = document.getElementById('img1');
EventUtil.addEvent(oImg,'load',function(event){
    var event  = EventUtil.getEvent(event);
    alert(EventUtil.getTarget(event).src);
});

以上事件处理程序中可以获取到event.target，因此也就可以访问img元素的src属性。

例2：向DOM动态插入img元素，注意一旦img指定了src图片就会开始加载，尽管它还没有被插入到DOM结构中，所以应该先绑定load事件，再指定src。

var oImg = document.createElement('img');
EventUtil.addEvent(oImg,'load',function(event){
    alert('loaded!');
});
document.body.appendChild(oImg);
oImg.src = 'img1.png';

例3：为Image对象绑定load事件处理程序，注意Image对象无法添加到DOM结构中，它的作用是在DOM出现前用来在页面显示图像的，同img元素一样，一旦指定src图片就会开始加载，因此应该先绑定事件。

var oImg = new Image();
EventUtil.addEvent(oImg,'load',function(event){
    alert('loaded!');
});
oImg.src = 'img1.png';

script元素和link元素也可以绑定load事件，但是低版本浏览器不支持，与图片加载不同的是，这两个元素只有进入DOM结构才会开始加载，因此不用注意代码顺序。