一:什么是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
<script src="./EventUtil.js"></script>
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')[0].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);
})