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事件处理程序的方式
- 使用javaScript来指定事件处理程序,并传入一个event对象,这个对象中不包含有关这个事件的任何附加信息,但在兼容DOM的浏览器中,event.target属性会被设置为document,且IE并不会为这个事件设置srcElement属性
- 在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事件也会在文档被滚动期间重复被触发