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结构才会开始加载，因此不用注意代码顺序。

UI事件之load的更多相关文章

  1. Javascript高级编程学习笔记（61）—— 事件（5）UI事件

    UI事件 UI事件是指那些不一定与用户操作有关的事件 这些事件在DOM规范出现之前,都是以各种不同的形式存在于不同的浏览器 而在DOM事件中为了保证向后兼容,现有的UI事件如下: DOMActivat ...

  2. 事件类型-UI事件、焦点事件

    DOM3级事件包括以下几类事件: UI事件:当用户与页面上的元素交互时触发 焦点事件:当元素获得或失去焦点时触发 鼠标事件:当用户通过鼠标在页面上执行操作时触发 滚轮事件:当使用鼠标滚轮时触发 文本事 ...

  3. UI事件监听的击穿

    什么是UI事件监听的击穿 在游戏视图中,有两个UI界面叠在一起的时候,单击一个空白处,却触发了被覆盖在下层了UI界面中的单击事件,这就是单击击穿了上层界面. 假设场景中放置了一个箱子,单击箱子会触发一 ...

  4. Android学习笔记－－处理UI事件

    Handling UI Events 在Android里, 有不只一种方式可以截获用户与你的应用程序交互的事件. 在你的界面上处理事件时,你需要捕获用户与某个View实例交互时所产生的事件.View类 ...

  5. UI事件与内容，舞台与演员

    UI事件:创建/清除/显示/隐藏/填充内容/位置变化/形态变化/尺寸变化/颜色变化/ 非UI事件:点击/输入/拖动/

  6. unity UI事件

    由于工作需要到持续按键,所以了解了一下unity UI事件,本文主要转载于http://www.cnblogs.com/zou90512/p/3995932.html?utm_source=tuico ...

  7. 页面事件(Init,Load,PreRender)执行顺序

    简介 对由 Microsoft® Internet 信息服务 (IIS) 处理的 Microsoft® ASP.NET 页面的每个请求都会被移交到 ASP.NET HTTP 管道.HTTP 管道由一系 ...

  8. 无需Try catch 的UI事件封装类

    在UI处理中,经常需要进行异常处理,以便在错误发生时能够进行一些自定义的操作,比如,弹出消息框给用户,进行重试操作,记录日志等,如果能够让用户写代码时不用写try...catch,而只是关注业务逻辑的 ...

  9. UI事件之unload、resize和scroll

    unload事件 当页面卸载或用户从当前页面换到其他页面上时,会在window上触发unload事件.根据DOM2级规范规定,unload应该在body上触发,但所有浏览器都实现了在window上触发 ...

随机推荐

  1. 使用repo的本地开发流程

    repo下的本地开发流程 单分支开发:    1 本地新建工作目录并初始化repo库: repo init;    2 下载代码(只取服务器当前分支): repo sync -c;    3 创建本地 ...

  2. alarm函数可以定时

    貌似是可以的,不过感觉好像这样用不是很好,最好还是用回timer_settimer一些列函数吧,不过既然开了头,就看下alarm怎么用吧. 1. 所需头文件  #include<unistd.h ...

  3. [canvas]通过动态生成像素点做绚丽效果

    本例中的粒子就是实实在在的像素,由js代码在canvas上动态生成的像素点!这些像素点通过一个运动方法有规律地动了起来.透过这个思路,我们可以想到很多很炫的效果,但是这个性能有待考察.实验证明,动态控 ...

  4. oracle行号排序问题

    1.创建一个student,并且插入数据 ),age int) '); '); '); '); '); commit; 2.直接按照age进行排序显示行号: select * from(select ...

  5. （转）创建和查看Javadoc文档

    原地址:http://jinnaxu-tju-edu-cn.iteye.com/blog/667177 Javadoc是Sun公司提供的一个技术,它从程序源代码中抽取类.方法.成员等注释形成一个和源代 ...

  6. HTML5_1

    2014,新年伊始,我不再是那个憧憬离开大学校园.过自由生活的傻丫头了.23岁,时间荏苒,差不多四分之一的人生已悄然逝去,大学生活差不多也快要画上句号了.工作.工作永远都是人生的一部分.曾想着随便找一 ...

  7. php的一些小笔记--数学函数

    通常我们使用的数学函数不多,经常出现的有 floor 地板->舍去 ceil   天花板->进一 round 四舍五入 rand 随机数 mt_rand 产生更好的随机数 pow 指数表达 ...

  8. 论docker中 CMD 与 ENTRYPOINT 的区别

    Dockerfile里有 CMD 与 ENTRYPOINT 两个功能咋看起来很相似的指令,开始的时候觉得两个互用没什么所谓,但其实并非如此: CMD指令: The main purpose of a ...

  9. shell脚本练习(autocert)

    #!/bin/bash#By Spinestars#20131118 #name:ca_cert#certficate ca cd /etc/pki/CA/auto num=$RANDOM mv ./ ...

  10. ANDROID 开机启动VNC SERVER

    ANDROID 开机启动VNC SERVER 背景信息: 最近在做一个项目,在项目需求中有这么一项“要把VNC SERVER 添加到android里并让其开机自启动”.其实做这个项目也挺缚手缚脚的,因 ...