DOM3 级事件规定了以下几类事件：
- UI（User Interface，用户界面）事件，当用户与页面上的元素交互时触发；
- 焦点事件，当元素获得或失去焦点时触发；
- 鼠标事件，当用户通过鼠标在页面上执行操作时触发；
- 滚轮事件，当使用鼠标滚轮（或类似设备）时触发；
- 文本事件，当在文档中输入文本时触发；
- 键盘事件，当用户通过键盘在页面上执行操作时触发；
- 合成事件，当为IME（Input Method Editor，输入法编辑器）输入字符时触发；
- 变动（mutation）事件，当底层 DOM 结构发生变化时触发。
变动名称事件，当元素或属性名变动时触发。此类事件已经被废弃，没有任何浏览器实现它们。
UI事件
UI事件指的是那些不一定与用户操作有关的事件。
| 事件 | 描述 |
|---|---|
| 元素已经被用户操作（鼠标或键盘）激活。已被废弃。 | |
| load | 页面完全加载完后在window上触发，所有框架加载完毕后在框架集上触发，图像加载完毕在img元素上触发，当嵌入内容加载完毕在object元素上触发。 |
| unload | 页面完全卸载（window触发），所有框架都卸载后（框架集触发），嵌入内容卸载完毕后（object触发）。 |
| abort | 当用户停止下载过程，如果嵌入内容没有加载完，则在object元素上除法。 |
| error | 当发生JavaScript错误时（window触发），当无法加载图像时（img触发），当无法加载嵌入内容时（object触发），当一或多个框架无法加载（框架集触发）。 |
| select | 当用户选择文本框（texterea或input）中的一个或多个字符时触发。 |
| resize | 当窗口或框架的大小变化时在window或框架上触发。 |
| scroll | 当用户滚动带滚动条的元素中的内容时，在该元素上触发。 |
多数这些事件都与window对象或表单空间相关。
除了DOMActivate之外，其他事件在 DOM2 级事件中都归为HTML事件（DOMActivate在 DOM2 级中任然属于UI事件）。
要确定浏览器是否支持“DOM3 级事件”定义的事件，可以使用如下代码：
var isSupported = document.implementation.hasFeature("UIEvent","3.0");
1、load事件
js中最常用的一个事件就是load。当页面完全加载后（包括所有图像、js文件、css文件等外部资源），就会触发window上面的load事件。
有两种定义onload事件处理程序的方式。
1、使用JavaScript代码：
EventUtil.addHandler(window,"load",function(event){
alert("Loaded");
});
2、为<body>元素添加一个onload特性：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>Title</title>
</head>
<body onload="alert('Loaded!');">
<body>
</html>
图像上面也可以触发load事件，无论是在DOM元素中的图像元素还是HTML中的图像元素。因此可以在HTML中为任何图像指定onload事件处理程序：
<img src="smile.gif" onload="alert('Image loaded.')">
同样的功能也可以用javascript完成：
var img = document.getElementById("myImg");
EventUtil.addHandler(img,"load",function(event){
event = EventUtil.getEvent(event);
alert(EventUtil.getTarget(event).src);
});
在创建新的< img>元素时，可以为其指定一个事件处理程序，以便图像加载完毕后给出提示。此时，最重要的是要在指定src属性之前先指定事件。
//首先为window指定了onload事件处理程序。
//向DOM中添加一个新元素，必须确定页面已经加载完毕——如果在页面加载前操作document.body会导致错误。
EventUtil.addHandler(window,"load",function(){
//然后，创建了一个新的图像元素，并设置了其onload事件处理程序。
var image = document.createElement("img");
EventUtil.addHandler(image,"load",function(event){
event = EventUtil.getEvent(event);
alert(EventUtil.getTarget(event).src);
});
//最后将这个图像添加到页面中，还设置了它的src属性。
document.body.appendChild(image);
image.src = "smile.gif";
//新图像元素不一定要从添加到文档后才开始下载，只要设置了src属性就会开始下载。
});
还有一些元素也以非标准的方式支持load事件：
<script>元素也会触发load事件，以便开发人员确定动态加载的javascript文件是否加载完毕。
与图像不同，只有在设置了<script>元素的src属性并将该元素添加到文档后，才会开始下载Javascript文件。换句话说，对于<script>元素而言，指定src属性和指定事件处理程序的先后顺序就不重要了。
EventUtil.addHandler(window,"load",function(){
var script= document.createElement("script");
EventUtil.addHandler(script,"load",function(event){
alert("loaded");
});
script.src = "example.js";
document.body.appendChild(script);
});
IE和Opera还支持< link>元素上的load事件，以便开发人员确定样式表是否加载完毕。
与< script>节点类似，在未指定href属性并将< link>元素添加到文档之前也不会开始下载样式表。
2、unload事件
这个事件在文档被完全卸载后触发。
只要用户从一个页面切换到另一个页面，就会发生unload事件。而利用这个事件最多的情况就是清除引用，以避免内存泄露。
与load事件类似，也有两种指定onunload事件处理程序的方式：
1、使用JavaScript代码：
EventUtil.addHandler(window,"unload",function(event){
alert("Unloaded");
//此时生成的event对象在兼容DOM的浏览器中只包含target属性（值为document）。
//IE8 及之前版本则为这个事件对象提供了 srcElement 属性。
});
2、为<body>元素添加一个onunload特性：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>Title</title>
</head>
<body onunload="alert('Unloaded!');">
<body>
</html>
3、resize事件
当浏览器窗口被调整到一个新的高度或宽度时，就会触发resize事件。
这个事件在window上面触发，因此可以通过Javascript或者<body>元素中的onresize特性来指定事件处理程序。
EventUtil.addHandler(window,"resize",function(event){
alert("resize");
});
在兼容DOM的浏览器中，event.target = document；而 IE8 及之前的版本则未提供任何属性。
关于何时会触发resize事件，不同的浏览器有不同的机制：
Firefox：只会在用户停止调整窗口大小时才会触发resize事件。
其他浏览器：只要浏览器窗口变化了1像素时就触发，然后随着变化不断重复触发。
由于存在这个差别，应该注意不要在这个事件的处理程序中加入大计算量的代码，因为这些代码有可能被频繁执行，从而导致浏览器反应明显变慢。
浏览器窗口最小化或最大化时也会触发resize事件。
4、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);
}
});
与resize事件类似，scroll事件也会在文档被滚动期间重复被触发，所以有必要尽量保持事件处理程序的代码简单。
焦点事件
焦点事件会在页面元素获得或失去焦点时触发。
利用这些事件并与document.hasFocus（）方法及document.activeElement属性配合，可以知晓用户在页面上的行踪。
| 事件 | 描述 |
|---|---|
| blur | 在元素失去焦点时触发，这个事件不会冒泡。 |
| focus | 在元素获得焦点时触发，这个事件不会冒泡。 |
| focusin | 在元素获得焦点时触发，与HTML事件focus等价，但它冒泡。 |
| focusout | 在元素失去焦点时触发，这个事件是HTML事件blur的通用版本。 |
| 在元素获得焦点时触发。DOM3 级事件废弃了DOMFocusIn，选择了focusin。 | |
| 在元素失去焦点时触发。DOM3 级事件废弃了DOMFocusIn，选择了focusout。 |
这一类事件中最主要的两个是focus和blur，他们都是JavaScript早期就得到所有浏览器支持的事件，但它们不冒泡，因此才会有focusin和focusout被纳入标准方式。
当焦点从页面的一个元素移动到另一个元素，会依次触发下列事件：
- focusout：在失去焦点的元素上触发
- focusin：在获得焦点的元素上触发
- blur：在失去焦点的元素上触发
- focus：在获得焦点的元素上触发
其中，focusout和blur的事件目标是失去焦点的元素；focus和focusin的事件目标是获得焦点的元素。
鼠标与滚轮事件
鼠标事件是web开发中最常用的一类事件。
DOM3级事件中定义了9个鼠标事件：
| 事件 | 描述 |
|---|---|
| click | 在用户单击主鼠标按钮或按下回车键时触发。这意味着onclick事件处理程序即可以通过键盘也可以通过鼠标执行。 |
| dbclick： | 在用户双击主鼠标按钮时触发。 |
| mousedown | 用户按下了任意鼠标按钮时触发，不能通过键盘触发这个事件。 |
| mouseenter | 在鼠标光标从元素外部首次移动到元素范围之内时触发。这个事件不冒泡，而且在光标移动到后代元素上不会触发。 |
| mouseleave | 在位于元素上方的鼠标光标移动到元素范围之外时触发。这个事件不冒泡，而且在光标移动到后代元素上不会触发。 |
| mousemove | 当鼠标指针在元素内部移动时重复地触发。不能通过键盘触发这个事件。 |
| mouseout | 在鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发。又移入另一个元素可能位于前一个元素的外部，也可能是这个元素的子元素。不能通过键盘触发这个事件。 |
| mouseover | 在鼠标指针位于一个元素外部，然后用户将其首次移入另一个元素边界之内时触发。不能通过键盘触发这个事件。 |
| mouseup | 在用户释放鼠标按钮时触发。不能通过键盘触发这个事件。 |
页面上所有元素都支持鼠标事件。除了mouseenter和mouseleave，所有鼠标事件都会冒泡，也可以被取消。
- 只有在同一个元素上相继触发mousedown和mouseup事件，才会触发click事件；
- 如果mousedown或mouseup中的一个被取消，就不会触发click事件；
- 只有触发两次click事件，才会触发一次dbclick事件；
- 如果有代码阻止了连续两次触发click事件，那么就不会触发dbclick事件了。
这4个事件触发的顺序始终如下：
- mousedown
- mouseup
- click
- mousedown
- mouseup
- click
- dbclick
click和dbclick都会依赖与其他先行事件的触发；而mousedown和mouseup则不受其他事件影响。
鼠标事件中还有一个滚轮事件mousewheel，这个事件跟踪鼠标滚轮。
