javascript中的UI事件 — 第13.4.1节

一:什么是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);
})
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值