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结构才会开始加载，因此不用注意代码顺序。
UI事件之load的更多相关文章
- Javascript高级编程学习笔记（61）—— 事件（5）UI事件
UI事件 UI事件是指那些不一定与用户操作有关的事件 这些事件在DOM规范出现之前,都是以各种不同的形式存在于不同的浏览器 而在DOM事件中为了保证向后兼容,现有的UI事件如下: DOMActivat ...
- 事件类型-UI事件、焦点事件
DOM3级事件包括以下几类事件: UI事件:当用户与页面上的元素交互时触发 焦点事件:当元素获得或失去焦点时触发 鼠标事件:当用户通过鼠标在页面上执行操作时触发 滚轮事件:当使用鼠标滚轮时触发 文本事 ...
- UI事件监听的击穿
什么是UI事件监听的击穿 在游戏视图中,有两个UI界面叠在一起的时候,单击一个空白处,却触发了被覆盖在下层了UI界面中的单击事件,这就是单击击穿了上层界面. 假设场景中放置了一个箱子,单击箱子会触发一 ...
- Android学习笔记－－处理UI事件
Handling UI Events 在Android里, 有不只一种方式可以截获用户与你的应用程序交互的事件. 在你的界面上处理事件时,你需要捕获用户与某个View实例交互时所产生的事件.View类 ...
- UI事件与内容，舞台与演员
UI事件:创建/清除/显示/隐藏/填充内容/位置变化/形态变化/尺寸变化/颜色变化/ 非UI事件:点击/输入/拖动/
- unity UI事件
由于工作需要到持续按键,所以了解了一下unity UI事件,本文主要转载于http://www.cnblogs.com/zou90512/p/3995932.html?utm_source=tuico ...
- 页面事件(Init,Load,PreRender)执行顺序
简介 对由 Microsoft® Internet 信息服务 (IIS) 处理的 Microsoft® ASP.NET 页面的每个请求都会被移交到 ASP.NET HTTP 管道.HTTP 管道由一系 ...
- 无需Try catch 的UI事件封装类
在UI处理中,经常需要进行异常处理,以便在错误发生时能够进行一些自定义的操作,比如,弹出消息框给用户,进行重试操作,记录日志等,如果能够让用户写代码时不用写try...catch,而只是关注业务逻辑的 ...
- UI事件之unload、resize和scroll
unload事件 当页面卸载或用户从当前页面换到其他页面上时,会在window上触发unload事件.根据DOM2级规范规定,unload应该在body上触发,但所有浏览器都实现了在window上触发 ...
随机推荐
- Android Training: 设备管理
Android 设备管理 Android2.2 通过Android设备管理API提供对企业级应用的支持.设备管理API在系统级别提供了设备管理特性.这些API可以在企业环境下,需要对员工设备进行控制时 ...
- 几句话弄清楚Java参数传值还是传引用
最近刷题做了一些算法题,对于在递归函数调用的时候什么时候传入值,什么时候传入引用有疑问,在网上搜索了一下,得出了一下三条总结: 1.对象就是传引用 2.原始类型就是传值 3.String,Intege ...
- iOS-设计模式之Block
Block是代码块, Block定义 返回值 (^ 块名)(参数1,参数2…); 在定义Block的时候可以使用typedef 重命名一下. typedef void(^blockName)(NSSt ...
- sketchup 导出 fbx文件 单位 错误
最近在使用sketchup导出fbx文件到unity中使用时,发生了尺度单位上的错误.按照网上给出的标准教程,选定模型的单位为十进制-米.导出时选项选择'米',但是得到的fbx文件在unity中出现了 ...
- CDZSC_2015寒假新人（2）——数学 A
A - A Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Submit Status ...
- [C++程序设计]对“&”和“*”运算符
对“&”和“*”运算符再做些说明:(1) 如果已执行了“pointer_1=&a;”语句,请问&*pointer_1的含义是什么?“&”和“*”两个运算符的优先级别相同 ...
- mysql 关键字bug
今天运行语句 select * from order; 出现bug: ERROR 1064 (42000): You have an error in your SQL syntax; check t ...
- wifi智能插座 一键扫描局域网内插座Ip及其它信息 Python源代码API
转载请保留原地址. http://www.cnblogs.com/lsqandzy 最近买了几个智能插座玩,插座安装在家里,连接好wifi,不管你人在哪里,通过手机,一键开启或关闭插座电源,想象一下, ...
- SD/MMC卡初始化及读写流程
二.MMC/SD卡的模型和工作原理 PIN脚.SD卡总线.SD卡结构.SD卡寄存器.上电过程 SD卡寄存器: OCR:操作电压寄存器: 只读,32位 第31位: 表示卡上电的状态位 CID: 卡 ...
- FLASH 存储学习-串行SPI nor
1.1 SST25VF080B简介 1.1.1 主要特性 关键点:容量.速度(时钟速度.读写速度).功耗. 容量:8MBit: 最高SPI时钟频率:50MHz: 低功耗模式下电流消耗:5uA,正常读模 ...