load事件,加载完成后再触发事件
EventUtil.addHandler(window,"load",function(event)
{alert("loaded");
})
<body onload="alert('loaded')">
<img src="smile.gif"onload="alert('image loaded')">
EventUtil.addHandler(window,"load",function(){
var image=document.createElement("img"):
EventUtil.addHandler(image,"load",function(event){
event=EventUtil.getEvent(event);
alert(EventUtil.getTarget(event).src);
});
document.body.appendChild(image);
image.src="snile.gif";
});
unload事件，这个事件是在文档被完全卸载后触发，，只要用户从一个页面切换到另一个页面就会发生unload事件，利用这个时间最多的情况是清除引用，以避免内存泄漏。
EventUtil.addHandler(window,"unload",function(event){
alert("unload");});
resize事件.不要在这个事件的处理程序中加入大计算量的代码，因为这些代码有可能被频繁执行(变化1像素就会触发此事件)，从而导致浏览器反应明显变慢
EventUtil.addHandler(window,"resize",function(event){
alert("resized");
});
scroll事件scrollLeft 和scrollTop监控。在文档滚动期间重复被触发，所以有必要尽量保持事件处理程序的代码简单。
<script>
EventUtil.addHandler(window,"scroll",function(event){
if(document.compatMode="CSS1Compat"){
alert(document.documentElement.scrollTop);
}else{
alert(document.body.scrollTop);
}
});
</script>
焦点事件focus 和blur 检测浏览器是否支持
var isSupported=document.implementation.hasFeature("FocusEvent","3.0");
鼠标与滚轮事件
<script>
var isSupported=document.implementation.hasFeature("MouseEvent","3.0");
</script>
<script>
var isSupported=document.implementation.hasFeature("MouseEvent","2.0");
</script>
客户区鼠标坐标位置
<script>
var div=document.getElementById("mydiv");
EventUtil.addHandler(div,"click",function(event){
event=EventUtil.getEvent(event);
alert("client coordinates:"+event.clientX+","+event.clientY);
});
</script>
页面鼠标坐标位置
<script>
var div=document.getElementById("mydiv");
EventUtil.addHandler(div,"click",function(event){
event=EventUtil.getEvent(event);
alert("client coordinates:"+event.pageX+","+event.pageY);
});
</script>
跨浏览器IE8及更早版本不支持事件对象上的页面坐标，不过使用客户区作弊哦啊和滚动信息可以计算出来，这时候需要用到document.body(混杂模式)和document.documentElement(标准模式)中的scrollLeft和scrollTop属性
<body>
<buttonid="mybtn">dd</button>
</body>
<script>
var div=document.getElementById("mydiv");
EventUtil.addHandler(div,"click",function(event){
var pagex=event.pagex;
var pagey=event.pagey;
if(pagex=undefined){
pagex=event.clientX+(document.documentElement.scrollLeft||document.body.scrollLeft);
}
if(pagey=undefined){
pagey=event.clientY+(document.documentElement.scrollLeft||document.body.scrollLeft);
}
alert("page coordinates:"+pagex+","+pagey);
});
</script>
相对整个电脑屏幕坐标位置
<body>
<buttonid="mybtn">dd</button>
</body>
<script>
var div=document.getElementById("mydiv");
EventUtil.addHandler(div,"click",function(event){
event=EventUtil.getEvent(event);
alert("screen coordinates:"+event.screenx+","+event.screeny);
});
</script>
修改键 shiftkey altkey ctrlkey metakey四个属性，包含的都是布尔值，如果相应的键被按下了，则值为true，否则值为false
<body>
<buttonid="mybtn">dd</button>
</body>
<script>
var div=document.getElementById("mydiv");
EventUtil.addHandler(div,"click",function(event){
event=EventUtil.getEvent(event);
var keys=newarray();
if(event.shiftkey){
keys.push("shift");
}
if(event.altkey){
keys.push("alt");
}
if(event.ctrlkey){
keys.push("ctrl");
}
if(event.metatkey){
keys.push("meta");
}
alert("keys:"+keys.join(","));
});
</script>
鼠标按钮跨浏览器
<script>
var EventUtil={
getButton:function(event){
if(document.implementation.hasFeature("MouseEvent","2.0")){
return event.button;
}else{
switch(event.button){
case 0:
case 1:
case 3:
case 5:
case 7:
return 0;
case 2:
case 6:
return 2;
case 4:
return 1;
}
}
}
};
</script>
<script>
var div=document.getElementById("myDiv");
EventUtil.addHandler(div,"mousedown",function(event){
event=EventUtil.getEvent(event);
alert(EventUtil.getButton(event));
});
</script>
