一：什么是UI事件？
UI事件指的是那些不一定与用户操作有关的事件。这些事件在DOM规范出现之前，都是以其他形式存在的。在DOM规范中保留是为了向后兼容。ui事件有7种
1.DOMActivate：表示已经被用户操作过的元素。DOM3中被废弃。Firefox和chrome可以使用。
2. load：
- 页面完全加载后再window上面触发；
- 当所有框架都加载完毕时在框架上面触发；
- 当图片加载完毕时在元素触发；
- 当嵌入的内容加载完毕时在元素上面触发。
3. unload：
- 当页面完全卸载后再window上面触发；
- 当所有框架都卸载后再框架集上面触发；
- 当嵌入的内容卸载完毕后再元素上面触发。
4. abort：在用户停止下载过程时，如果嵌入的内容没有加载完，则在元素上面触发。
5. error：
- 当发生javascript错误时在window上面触发；
- 当无法加载图像时在元素上面触发；
- 当无法加载嵌入内容时在元素上面触发；
- 当有一或多个框架无法加载时在框架集上面触发。
6.select：当用户选择文本框中(input或texterea)的一个或多个字符时触发
7. scroll：当用户滚动带滚动条的元素中的内容时，在该元素上面触发。元素包含所加载页面的滚动条。
二：判断浏览器是否支持的DOM2级或DOM3级事件？
要确定浏览器是否支持DOM2级事件规定的HTML事件(除了DOMActive之外，其他事件在DOM2中都是HTML事件)，可以这样来写：
//浏览器是否支持DOM2级事件
var isSupported = document.implementation.hasFeature('HTMLEvents','2.0');
//浏览器是否支持DOM3级事件
var isSupported2 = document.implementation.hasFeature('UIEvent','3.0');
三：每个事件的使用方法？
下面的每个测试需要加上封装过的事件类EventUtil，地址为：http://blog.csdn.net/flyingpig2016/article/details/53392688
1.load事件？
- 给window对象绑定load事件
EventUtil.addHandler(window,'load',function(event){
console.log('Loaded!');
})
- 给文档中的节点绑定load事件
EventUtil.addHandler(images,'load',function(event){
event = EventUtil.getEvent(event);
console.log(EventUtil.getTarget(event).src);
console.log(event.target.src);
})
- 给动态加载的图片图片绑定load事件方法一：
EventUtil.addHandler(window,'load',function(){
var image = document.createElement('img');
EventUtil.addHandler(image,'load',function(event){
event = EventUtil.getEvent(event);
console.log(EventUtil.getTarget(event).src);
})
document.body.appendChild(image);
image.src = '../../../../03work/Nifty/img/av3.png';
})
- 给动态加载的图片图片绑定load事件方法二：
EventUtil.addHandler(window,'load',function(){
var image = new Image();
console.log(image); //<img>
EventUtil.addHandler(image,'load',function(event){
console.log('Image loaded!');
});
image.src = '../../../../03work/Nifty/img/av1.png';
document.body.appendChild(image);
});
- 给动态加载的js文件绑定load事件
EventUtil.addHandler(window,'load',function(event){
var scripts = document.createElement('script');
EventUtil.addHandler(scripts,'load',function(event){
console.log('js is load');
})
scripts.src = './EventUtil.js';
document.body.appendChild(scripts);
});
- 给动态加载的css文件绑定load事件
EventUtil.addHandler(window,'load',function(){
var link = document.createElement('link');
link.type = 'text/css';
link.rel = 'stylesheet';
EventUtil.addHandler(link,'load',function(event){
console.log('css loaded');
});
link.href = './1.css';
document.getElementsByTagName('head')[].appendChild(link);
});
2.unload事件？
用的不多，是指在文档被完全卸载后触发，只要用户从一个页面切换到另个页面，就会触发。但是利用这个事件最多的情况是清除引用，避免内存泄露。
EventUtil.addHandler(window,'unload',function(event){
console.log(onunload);
});
3.resize事件？
窗口大小发生变化时触发
EventUtil.addHandler(window,'resize',function(event){
console.log('Resized');
});
4.scroll事件？
标准模式下，除了Safari基于跟踪滚动位置，其他浏览器都会通过
<html>
元素来反映这一变化。
EventUtil.addHandler(window,'scroll',function(event){
console.log(document.body.scrollTop);
})
![主流浏览器四大综合性能测试[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)