网站建设资讯

NEWS

网站建设资讯

javascript中load事件如何使用

本篇内容介绍了“javascript中load事件如何使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

成都创新互联专注于企业营销型网站建设、网站重做改版、延寿网站定制设计、自适应品牌网站建设、HTML5建站商城网站制作、集团公司官网建设、外贸营销网站建设、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为延寿等各大城市提供网站开发制作服务。

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 元素。
       图像上面也可以触发 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+及 更高版本中,