这里笼统的罗列了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的值，还有其他的类似属性值，得在测试一下。
-
网友评论