首页 > 代码库 > JavaScript高级程序设计44.pdf
JavaScript高级程序设计44.pdf
unload事件
与load事件对应的是unload事件，这个事件在文档被完全卸载后触发，只要用户从一个页面切换到另一个页面，就会发生unload事件，最多的情况是清除引用，避免内存泄漏
与load事件类似，也有两种指定onunload事件的处理程序方式
EventUtil.addHandler(window,"unload",function(event){
alert("Unloaded");
});
为元素添加特性
<body onunload="alert(‘Unloaded!‘)">
根据“DOM2级事件”，应该<body>元素而非window对象上面触发unload事件，不过所有浏览器都在window上实现了unload事件，以确保向后兼容
resize事件
当浏览器窗口被调整宽度或者高度时，就会触发resize事件，同样2种方式
EventUtil.addHandler(window,"resize",function(event){
alert("Resized");
});
IE、Safari、Chrome和Opera会在浏览器变化1像素时就触发resize事件，然后随变化不断触发，Firefox则是在停止变化后触发事件，所以要避免大量的计算
浏览器最大化最小化也会触发resize事件
scroll事件
scroll事件在window对象上发生，实际表示的是页面中相应元素的变化，在混杂模式下可以通过<body>元素的scrollLeft和scrollTop来监控这一变化；而在标准模式下，除Safari之外的所有浏览器都会通过<html>元素反映这一变化
EventUtil.addHandler(window,"scroll",function(event){
if(document.compatMode=="CSS1Compat"){
alert(document.documentElement.scrollTop);
}else{
alert(document.body.scrollTop);
}
});
这个事件同样应避免大量计算
焦点事件
焦点事件会在页面获得或失去焦点时触发,有以下6个焦点事件
blur:在元素失去焦点时触发，这个事件不会冒泡，所有浏览器都支持它
focus:在元素获得焦点时触发，这个事件不会冒泡，所有浏览器都支持它
DOMFocusIn:在元素获得焦点时触发，DOM3级事件已废弃，只有Opera支持这个事件
DOMFocusOut:在元素失去焦点时触发，DOM3级事件已废弃，只有Opera支持这个事件
focusin:在元素获得焦点时触发，这个事件与HTML事件focus等价，但它冒泡，IE5.5+、Safari5.1+、Opera11.5+和Chrome支持
focusout:在元素失去焦点时触发，这个事件与HTML事件blur等价，但它冒泡，IE5.5+、Safari5.1+、Opera11.5+和Chrome支持
blur和focus不冒泡是最大的问题，IE的方式被DOM3级事件采纳为标准方式
当焦点从页面中的一个元素移动到另一个元素，会依次触发下列事件：
focusout→focusin→blur→DOMFocusOut→focus→DOMFocusIn
鼠标与滚轮事件
鼠标事件是Web开发中最常用的一类事件，DOM3级事件中定义了9个鼠标事件
click:鼠标单击左键或键盘回车键
dblclick:鼠标双击左键DOM3级将其纳入了规范，
mousedown:按下任意鼠标按钮时触发，不支持键盘触发
mouseenter:鼠标光标从元素外部首次移动到元素范围内时触发，该事件不冒泡。DOM3级将其纳入了规范，IE、Firefox9+和Opera支持这个事件
mouseleave:鼠标光标从元素上方移动到元素范围外时触发，该事件不冒泡。DOM3级将其纳入了规范，IE、Firefox9+和Opera支持这个事件
mousemove:鼠标指针在元素内部移动时重复地触发，不支持键盘触发
mouseout:鼠标指针位于元素上方，用户将其移入另一个元素时触发，另一个元素可能位于前一个元素的外部也可能是这个元素的子元素，不支持键盘触发
mouseover:鼠标指针位于一个元素外部，然后用户将其首次移入另一个元素边界之内时触发，不支持键盘触发
mouseup:释放鼠标按钮时触发，不支持键盘触发
上面的事件除了mouseleave和mouseenter，其余都会冒泡，也可以被取消，取消鼠标事件将会影响浏览器的默认行为
事件与事件之间的联系非常紧密
mousedown→mouseup→click→mousedown→mouseup→click→dblclick
IE8及之前版本有个BUG，IE9修复了该BUG
mousedown→mouseup→click→mouseup→dblclick
检测浏览器是否支持DOM2级事件（除dblclick、mouseenter和mouseleave之外）
var isSupported=document.implementation.hasFeature("MouseEvents","2.0");
检测浏览器是否支持以上所有事件
var isSupported=document.implementation.hasFeature("MouseEvent","3.0");
注意：DOM3级事件的feature名是"MouseEvent"，而非"MouseEvents"
鼠标还有一类滚轮事件，mousewheel事件，用于跟踪鼠标滚轮