关于javaScript中的UI事件

UI事件
UI事件指哪些不一定与用户操作有关的事件。现有的UI事件如下：

• DOMActivte：表示元素已经被用户操作（通过鼠标或键盘）激活。此事件在DOM3级事件中被废弃，但Firefox2+和Chrome支持它，考虑不同浏览器实现差异，不建议使用
• load：当页面完全加载后在window上触发，当所有框架都加载完毕时在框架集上触发，当图像加载完毕时在img元素上触发，当嵌入内容时，在object元素上触发
• unload：当页面完全写在后在window上触发，当所有框架都写在后在框架集上触发，当嵌入内容卸载完毕后再object元素上触发
• abort：在用户停止下载过程时，如果嵌入的内容还没有加载完，在object元素上触发
• error：当发生javaScript错误时在window上触发，当无法记载图像时在img元素上触发，当无法加载嵌入内容时在object元素上触发或当有一或多个框架无法加载时在框架集上触发
• select：当用户选择文本框（input或texterea）中的一或多个字符串时触发
• resize：当窗口或框架的大小变化时在window或框架上触发
• scroll：当用户滚动带滚动调的元素中的内容时，在该元素上触发。body中包含所加载页面的滚动调

以上事件多数与window对象或表单空间有关

load事件

在window中使用load事件，当页面完全加载后（包括所有图像、javascript文件、css文件等外部资源），就会触发window上的load事件，有两种定义onload事件处理程序的方式

1. 使用javaScript来指定事件处理程序，并传入一个event对象，这个对象中不包含有关这个事件的任何附加信息，但在兼容DOM的浏览器中，event.target属性会被设置为document，且IE并不会为这个事件设置srcElement属性
2. 在HTML中的body元素里直接添加onload特性

一般来说在window上发生的任何事件都可以在body元素中通过相应的特性来指定，因为HTML中无法访问window元素，为了保证向后兼容，尽可能使用JavaScript方式

在img中使用load事件

• 图片加载完毕时触发，其中的event对象可以用src属性访问图片地址
• 在创建的img元素中先使用javaScript指定load事件处理程序，在设置src属性，一旦设置，浏览器就开始下载此图片，load可能不处罚
• 在不属于DOM文档的图像（包括未添加到文档的img元素和image对象）上触发load事件时，IE8及其之前的版本不会生成event对象，IE9修复了这个问题

外部资源使用load
在IE9+、Firefox、Opera、Chrome和Safari3+及更高版本中，script元素也会触发load事件，与img元素不同，只有在添加到文档后才会开始下载文件
在此事件中，大多数浏览器中的event对象的target属性引用的都是script节点，在Firefox3之前的版本中引用的是document。IE之前的版本都不支持
IE和Opera还支持link元素上的load事件，在添加到文档之前不会下载也样式表

unload事件

与load事件相对的是unload事件，这个事件在文档被完全卸载后触发。只要用户从一个页面切换到另一个页面，就会发生unload事件。而利用这个事件最多的情况是清除引用，避免内存泄漏。与load事件一样，也有两种使用方式

在此事件中生成的event对象在兼容DOM的浏览器只包含target属性（值为document）。IE8及之前版本则为这个事件对象提供srcElement属性

需要小心使用此事件，此事件发生之后，页面加载后存在的对象不一定存在了，此时，操作DOM节点或者元素的样式就会导致错误

resize事件

当浏览器窗口发生高度或宽度变化时，触发resize事件。此事件在window上触发。所以可以使用javaScript或在body元素中的onresize特性指定事件处理程序

与其他发生在window上的事件类似，在兼容DOM的浏览器中，传入事件处理程序中的event对象有一个target属性，值为document；IE8之前版本未提供任何属性

何时触发resize事件，不同浏览器有不同机制。IE、Safari、Chrome和Opera会在浏览器窗口变化了1px就触发resize事件，然后随着变化不断触发，Firefox则只会在用户停止调整窗口大小时才会触发resize事件。由于存在这个差别，注意不要在此事件中加入大量计算代码，有可能会被频繁执行，从而导致浏览器反应明显变慢

scroll事件

虽然scorll事件在window对象上触发，但它实际表示的则是在页面中相应元素的变化。在混杂模式下，可以通过body元素的scrollLeft和scrollTop来监控这一变化；在标准模式下，除Safari之外的浏览器都会通过html元素来反映这一变化（Safari仍然基于body跟踪滚动位置）

如果document.compoatMode == "CSSLCommpat" 使用document.documentElement.srollTop否则使用document.body.scrollTop

由于Safari3.1之前的版本不支持document.compatMode因此使用document.body.scrollTop，与resize事件类似，scroll事件也会在文档被滚动期间重复被触发