JS—事件类型（UI事件）

2014-12-16 本文已影响825人 Miss____Du

这里笼统的罗列了js的事件类型。

UI事件-当用户与页面上的元素交互时触发
DOM3级事件-UI事件除了已经被废弃的DOMActivate事件外，其他事件在DOM2级事件中被归为HTML事件。

判定浏览器是否支持该事件类型
var isSupported=document.implementation.hasFeature('HTMLEvents','2.0');
alert(isSupported);//true or false
var isSupported=document.implementation.hasFeature("UIEvent",'3.0');
alert(isSupported);//true or false
- load事件
  - 该事件内的event对象并不包含有关这个事件的任何附加信息。
  - 在兼容DOM的浏览器中，存在event.target，IE中不存在srcElement
  - IE8及之前的版本不会生成event对象。IE9修复了这个问题。
  - window-load
    当页面完全加载完毕后，包括所有图像、js文件、css文件等外部资源，就会触发window上面的load事件。
    方法1：通过通用侦听事件函数，为window对象添加load事件
    function handler(){
    alert("页面加载完毕！");
    }
    EventUtil.addHandler(window,'load',handler);
    方法2：通过在body元素上指定load事件。（html指定，0级2级）
    在window上发生的任何事件都可以在body元素中通过相应的特性来指定。
  - image-load
    当图像加载完毕后，就会触发image上面的load事件。
    方法1：html指定。
    方法2：通过通用侦听事件函数，为image对象添加load事件
    function handler(){
    alert("图像加载完毕！");
    }
    var image=document.getElementById("img")
    EventUtil.addHandler(image,'load',handler);
    方法3：为新创建的图像元素添加load事件
    EventUtil.addHandler(window,"load",function(){
    var image=document.createElement('img');
    EventUtil.addHandler(image,'load',function(event){
    event=EventUtil.getEnent(event);
    alert(EventUtil.getTarget(event).src);
    })
    document.body.appendChild(image);
    image.src='../css/xin.jpg';
    });
    【解释1】在window的load事件处理程序内写，是为了确定页面已经加载完毕，页面加载前操作会报错。
    【解释2】在指定src属性之前先指定事件，因为一旦设置了src，不一定被添加到文档，便开始加载图片。
    【解释3】在加载之前添加到文档，因为如果不添加到文档，当图片下载完毕后，也会显示警告框。
  - Link与script-load
    方法同上，但是需要区别的是：
    只有在设置了<script>元素的scr属性并将该元素添加到文档后，才会开始下载js文件。同样的<link>元素的href属性。
- unload事件
  当文档、图像、或者引用被用户卸载后，会触发这个事件。
  方法与load相似。
- resize事件
  当浏览器窗口被调整到一个新的高度或宽度使就会触发resize事件，每当改变一像素就会触发resize事件，所以不要在这段处理程序内添加大量计算的代码。
  方法有两个：一个是在body上添加，另一个是使用通用侦听函数在window上添加
```
 EventUtil.addHandler(window,'resize',function(){
     alert('resized')
 })
```
- scoll事件
  EventUtil.addHandler(window,'scroll',function(){
  if(document.compatMode=='CSS1Compat'){
  alert(document.documentElement.scrollTop);
  }else{
  alert(document.body.scrollTop);
  }
  })
  【解释1】这里有网友总结了document.compatMode兼容模式该属性，他有两个值
  BackCompat：标准兼容模式关闭。
  CSS1Compat：标准兼容模式开启。
  在标准模式下，是通过<html>元素来反应这一变化的。混杂模式下是通过body元素。
  浏览器中，除了safari，都是在标准模式下进行渲染的。
  【解释2】scrollLeft与scrollTop的值，还有其他的类似属性值，得在测试一下。

JS—事件类型（UI事件）

猜你喜欢

热点阅读