结合实例详细介绍javascript中load事件使用方法

JavaScript 中最常用的一个事件就是 load。当页面完全加载后（包括所有图像、JavaScript 文件、 CSS 文件等外部资源），就会触发 window 上面的 load 事件。有两种定义 onload 事件处理程序的方式。
第一种方式是使用如下所示的 JavaScript 代码：
EventUtil.addHandler(window, "load", function(event){
alert("Loaded!");
});
这是通过 JavaScript 来指定事件处理程序的方式，使用了本章前面定义的跨浏览器的 EventUtil 对象。与添加其他事件一样，这里也给事件处理程序传入了一个 event 对象。这个 event 对象中不包含有关这个事件的任何附加信息，，但在兼容 DOM 的浏览器中，event.target 属性的值会被设置为 document，而 IE 并不会为这个事件设置 srcElement 属性。第二种指定 onload 事件处理程序的方式是为元素添加一个 onload 特性，如下面的例子所示：

Load Event Example

一般来说，在 window 上面发生的任何事件都可以在元素中通过相应的特性来指定，因为在 HTML 中无法访问 window 元素。实际上，这只是为了保证向后兼容的一种权宜之计，但在此南昌网站制作公司百恒网络开发工程提示大家所有浏览器都能很好地支持这种方式。我们建议读者尽可能使用 JavaScript 方式。
图像上面也可以触发 load 事件，无论是在 DOM中的图像元素还是 HTML 中的图像元素。因此，可以在 HTML 中为任何图像指定 onload 事件处理程序，例如：

这样，当例子中的图像加载完毕后就会显示一个警告框。同样的功能也可以使用 JavaScript 来实现，例如：
var image = document.getElementById("myImage");
EventUtil.addHandler(image, "load", function(event){
event = EventUtil.getEvent(event);
alert(EventUtil.getTarget(event).src);
});
这里，使用 JavaScript 指定了 onload 事件处理程序。同时也传入了 event 对象，尽管它也不包含什么有用的信息。不过，事件的目标是元素，因此可以通过 src 属性访问并显示该信息。在创建新的元素时，可以为其指定一个事件处理程序，以便图像加载完毕后给出提示。此时，最重要的是要在指定 src 属性之前先指定事件，如下面的例子所示。
EventUtil.addHandler(window, "load", function(){
var image = document.createElement("img");
EventUtil.addHandler(image, "load", function(event){
event = EventUtil.getEvent(event);
alert(EventUtil.getTarget(event).src);
});
document.body.appendChild(image);
image.src = "smile.gif";
});
在这个例子中，首先为 window 指定了 onload 事件处理程序。原因在于，我们是想向 DOM中添加一个新元素，所以必须确定页面已经加载完毕——如果在页面加载前操作 document.body 会导致错误。然后，创建了一个新的图像元素，并设置了其 onload 事件处理程序。最后又将这个图像添加到页面中，还设置了它的 src 属性。这里有一点需要格外注意：新图像元素不一定要从添加到文档后才开始下载，只要设置了 src 属性就会开始下载。

同样的功能也可以通过使用 DOM0 级的 Image 对象实现。在 DOM 出现之前，开发人员经常使用 Image 对象在客户端预先加载图像。可以像使用元素一样使用 Image 对象，只不过无法将其添加到 DOM 树中。下面来看一个例子。
EventUtil.addHandler(window, "load", function(){
var image = new Image();
EventUtil.addHandler(image, "load", function(event){
alert("Image loaded!");
});
image.src = "smile.gif";
});
在此，我们使用 Image 构造函数创建了一个新图像的实例，然后又为它指定了事件处理程序。有的浏览器将 Image 对象实现为元素，但并非所有浏览器都如此，所以最好将它们区别对待。还有一些元素也以非标准的方式支持 load 事件。在 IE9+、Firefox、Opera、Chrome和 Safari 3+及更高版本中，

400-680-9298,0791-88117053

欢迎您的光顾，我们将竭诚为您服务×

售前咨询

售后服务