13.4 事件类型
Web浏览器中可能发生的事件有很多类型。不同的事件类型具有不同的信息，而“DOM3级事件”规定了下面几类事件：
◆ UI（User Interface，用户界面）事件：当用户与页面上的元素交互时触发；
◆ 焦点事件：当元素获得或失去焦点时触发；
◆ 鼠标事件：当用户通过鼠标在页面上执行操作时触发；
◆ 滚轮事件：当使用鼠标滚轮（或类似设备）时触发；
◆ 文本事件：当在文档中输入文本时触发；
◆ 键盘事件：当用户通过键盘在页面上执行操作时触发；
◆ 合成事件：当为IME（Input Method Editor，输入法编辑器）输入字符时触发；
◆ 变动（mutation）事件，当底层DOM结构发生变化时触发
◆ 变动名称事件，当元素或属性名变动时触发。此类事件已经被废弃，没有任何浏览器实现它们。
13.4.1 UI事件
UI事件指的是那些不一定与用户操作有关的事件。这些事件在DOM规范出现之前，都是以这种或那种形式存在的，而在DOM规范中保留是为了向后兼容。
◆ DOMActivate：表示元素已经被用户操作激活。在DOM3级事件中被废弃，但Firefox2+和Chrome支持它。不建议使用
◆ load：当页面完全加载后在window上面触发，当所有框架都加载完毕时在框架集上面触发，当图像加载完毕时在 <img>元素上面触发，或者当嵌入的内容加载完毕时在<object>元素上面触发。
//两种定义onload事件处理程序的方式
//一、通过Javascript指定事件处理程序
EventUtil.addHandler(window,"load",function(evnet){
alert("Loaded!");
})
//二、指定onload事件处理程序的方式是为<body>元素添加一个onload特性：
<!DOCTYPE>
<html>
<head>
<title>Load Event Example</title>
</head>
<body onload="alert('Loaded')">
</body>
</html>>
//一般在window上面发生的任何事件都可以在body元素中通过相应的特性来指定，这只是为了保证向后兼容的一种权宜之计。
//一般建议尽可能使用JavaScript方式
根据“DOM2级事件”规范，应该在document而非window上面触发load事件。但是，所有浏览器都在window上面实现了该事件，以确保向后兼容。
图像上面也可以触发load事件，无论是在DOM中的图像元素还是HTML中的图像元素。因为，可以在HTML中为任何图像指定onload事件处理程序：
<img src="smile.git" onload="alert('Image loaded.')">
◆ unload：当页面完全卸载后在window上面触发，当所有框架都卸载后再框架集上面触发，或者当嵌入的内容完毕后在<object>元素上面触发
利用这个事件最多的情况是清除引用，以避免内存泄露。有两个方法：
//一、使用Javascript：
EventUntil.addHandler(window,"unload",function(event){
alert("Unloaded");
});
//二、为<body>元素添加一个特性（与load事件相似）：
<!DOCTYPE>
<html>
<head>
<title>Unload Event Example</title>
</head>
<body onload="alert('Unloaded')">
</body>
</html>>
◆ abort：在用户停止下载过程时，如果嵌入的内容没有加载完。则在<object>元素上面触发。
◆ error：当发生Javascript错误时在window上面触发，当无法加载图像时在<img>元素上面触发，当无法加载嵌入内容时在<object>元素上触发，或者当有一或多个框架无法加载时在框架集上面触发。
◆ select：当用户选择文本框(<input>或<texterea>)中的一或多个字符时触发。
◆ resize：当窗口或框架的大小变化时在window或框架上面触发
这个事件在window（窗口）上面触发，因此可以通过Javascript或者<body>元素中的onresize特性来指定事件处理程序。
EventUtil.addHandler(window,"resize",function(event){
alert("Resized");
});
何时会触发resize事件，不同浏览器有不同机制。IE、Safari、Chrome和Opera会在浏览器窗口变化了1像素时触发resize事件，然后随着变化不断重复触发。Firefox则只会在用户停止调整窗口大小时才会触发resize事件。
浏览器窗口最小化或最大化时也会触发resize事件
◆ scroll：当用户滚动带滚动条的元素中的内容时，在该元素上触发。<body>元素中包含所加载页面的滚动条。
虽然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);
}
});
//以上代码指定的事件处理程序会输出页面的垂直滚动位置——根据呈现模式不同使用了不同的远古三。
与resize事件类似，scroll事件也会在文档被滚动期间重复被触发，所以有必要尽量保持事件处理的代码简单。
——————————————————————————
多数这些事件都与window对象或表单控件相关
除了DOMActivate之外，其他事件在DOM2级事件中都归为HTML事件。
只有根据“DOM2级事件”实现这些事件的浏览器才会返回true。
网友评论