JS load事件（UI）

来源：互联网发布：淘宝网板鞋编辑：程序博客网时间：2024/05/24 15:39

当页面完全加载后（包括所有图像、JavaScript文件、CSS文件等外部资源），就会触发window上面的load事件。
有两种定义onload事件处理程序的方式，第一种方式是使用如下的JavaScript代码：

 EventUtil.addHandler(window,"load",function(event){ alert("loaded!"); });//关于EventUtil这个对象的具体信息请参照前面的JS事件对象那篇文章

这是通过JavaScript来指定事件处理程序的方式。
第二种指定onload事件处理程序的方式是为<body>元素前面添加一个onload特性，如下面的例子所示：

<!DOCTYPE html><html><head>    <title>load Event Example</title></head><body onload = "alert("Loaded!")"></body></html>

一般来说，在window上面发生的任何事件都可以在<body>元素中通过相应的特性来指定，因为在HTML中无法访问window元素。实际上这是为了保证向后兼容的一种权宜之计，但所有浏览器都能很好的支持这种方式。
图像上面也能够触发load事件

<img src = "url" onload = "alert('image loaded')">

这样在图片加载完成时就会弹出一个警告框
当然也可以通过相应的ＪＳ代码来实现.

var image = document.getElementById("myImage");EventUtil.addHandler(image,"load",function(){event = EventUtil.getEvent(event);alert(EventUtil.getTarget(event).src);});

这里，使用javaScript指定了onload事件处理程序。同时也传入了event对象，尽管他也不包含什么有用的信息。不过，事件的目标是<img>元素，因此可以通过src属性访问并显示该信息.
在创建一个新的<img>元素时，可以为其指定一个事件处理程序，以便图片加载完成后给出提示。此时，最重要的是要在指定src属性之前先指定事件，如下面的例子

EventUtil.addHandler(window,"load",function(){var image = document.createElement("img");EventUtil.addHandler(image,"load",function(){    event = EventUtil.getEvent(event);    alert(EventUtile.getTarget(event).src);)};document.body.appendChild(image);image.src = "url";)};

在这个例子中，首先为 window 指定了 onload 事件处理程序。原因在于，我们是想向 DOM中添加一个新元素，所以必须确定页面已经加载完毕——如果在页面加载前操作 document.body 会导致错误。然后，创建了一个新的图像元素，并设置了其 onload 事件处理程序。最后又将这个图像添加到页面中，还设置了它的 src 属性。这里有一点需要格外注意：新图像元素不一定要从添加到文档后才开始
下载，只要设置了 src 属性就会开始下载。所以必须在指定URL之前先指定事件处理程序。
还有一些元素也以非标准的方式支持load事件。在IE9+，Firefox，Opera，Chrome和Safari3+级更高版本中，<script>元素也会触发load事件，以便开发人员确定动态加载的JavaScript文件是否加载完毕。与图像不同，只有在设置了<script>元素的src属性并且将该元素添加到文档后，才会开始下载JavaScript文件。换句话说，对于<script>元素而言，指定src属性和指定事件处理程序的先后顺序就不重要了。实例如下

EventUtil.addHandler(window,"load",function(){    var script = document.createElement("script");    EventUtil.addHandler(script,"load",function(event)    {    alert("Loaded");    });    script.src = "url";    document.body.appendChild(script);});

这个例子使用了跨浏览器的EventUtil对象为新创建的<script> 元素指定了 onload 事件处理程序。此时，大多数浏览器中 event 对象的 target 属性引用的都是 <script>节点，而在 Firefox 3 之前的版本中，引用的则是 document 。IE8 及更早版本不支持 <script>元素上的 load 事件。
IE 和 Opera 还支持 <link> 元素上的 load 事件，以便开发人员确定样式表是否加载完毕。例如：

EventUtil.addHandler(window, "load", function(){var link = document.createElement("link");link.type = "text/css";link.rel= "stylesheet";EventUtil.addHandler(link, "load", function(event){alert("css loaded");});link.href = "example.css";document.getElementsByTagName("head")[0].appendChild(link);});

0 0