DOM3级事件包括以下几类事件：
- UI事件：当用户与页面上的元素交互时触发
- 焦点事件：当元素获得或失去焦点时触发
- 鼠标事件：当用户通过鼠标在页面上执行操作时触发
- 滚轮事件：当使用鼠标滚轮时触发
- 文本事件：当在文档中输入文本时触发
- 键盘事件：当用户通过键盘在页面上执行操作时触发
- 合成事件：当为IME(输入法编辑器)输入字符时触发
- 变动事件：当底层DOM结构发生变化时触发
UI事件
包括以下事件：
1.load事件
- 当页面完全加载后（包括所有图像、js文件、css文件等外部资源）在window上面触发；
- 当所有框架都加载完毕时在框架集上面触发；
- 当图像加载完毕时在<img>元素上面触发；
- 当嵌入内容加载完毕时在<object>元素上触发。
两种定义onload事件处理程序的方式：
(1) js代码
(2) 为<body>元素添加一个onload属性
/*第一种方式*/ EventUtil.addHandler(window,"load",function(event){ //进行相应的操作 }) /*第二种方式*/ <body onload="相应操作"></body>
1.1 图像上触发load事件
/*方式1*/ <img src="smile.gif" onload="alert('Image Loaded')"> /*方式2*/ var image = document.getElementById("myImage"); EventUtil.addHandler(image, "load", function(event){ event = EventUtil.getEvent(event); alert(EventUtil.getTarget(event).src); });
在创建新的<img>元素时，可以为其指定一个事件处理程序，以便图像加载完之后给出提示，但是重要的是在指定src属性之前先指定事件，如下：
/*为window指定事件，确保在document.body不会出错，页面已经完全加载*/ EventUtil.addHandler(window, "load", function(){ var image = document.createElement("img"); //指定src之前先指定事件 EventUtil.addHandler(image, "load", function(event){ event = EventUtil.getEvent(event); alert(EventUtil.getTarget(event).src); }); document.body.appendChild(image); image.src = "smile.gif"; });
注意：新图像元素不一定要从添加到文档后才开始下载，只要设置了src属性就会开始下载。
1.2 <script>元素、<link>元素触发load事件
确定动态加载的js问价时候加载完毕，注意：与图像不同，只有设置了src属性并将新元素添加到文档后，才开始下载，所以对<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); }) EventUtil.addHandler(window, "load", function(){ var link = document.createElement("link"); link.type = "text/css"; link.rel= "stylesheet"; EventUtil.addHandler(link, "load", function(event){ alert("css loaded"); }); link.href = "example.css"; document.getElementsByTagName("head")[0].appendChild(link); });
2. unload事件
与load事件对应，在文档被完全卸载后触发，只要用户从一个页面切换到另一个页面，就会发生unload事件。该事件用的最多的就是清除引用，以避免内存泄漏。
/*第一种方式*/ EventUtil.addHandler(window,"unload",function(event){ //进行相应的操作 }) /*第二种方式*/ <body onunload="相应操作"></body>
unload事件是在一切都被卸载之后才触发的，那么在页面加载后存在的那些对象此时就不一定存在了，所以此时再操作DOM节点或元素的样式就会导致错误。
3.resize事件
当浏览器窗口被调整到一个新的高度或者宽度时，就会触发resize事件，该事件在window（窗口）上面触发，因此可以通过JavaScript或者<body>元素中的onresize特性来指定事件处理程序，推荐的JavaScript方式如下：
EventUtil.addHandler(window,"resize",function(event){}); //传入的event对象有一个target属性，值为document
关于何时触发resize事件不同浏览器有不同的机制，所以不要在这个事件的处理程序中加入大量的代码。
4.scroll事件
该事件是在window对象上发生的，但它实际表示的是页面中相应元素的变化：
- 混杂模式下：通过<body>元素的scrollLeft和scrollTop来监控到这一变化。
- 标准模式下：通过<html>元素来反映这一变化（除了Safari，Safari仍然基于<body>跟踪滚动位置）
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属性配合，可以知晓用户在页面上的行踪。有6个焦点事件：
- blur：在元素失去焦点时触发，该事件不会冒泡，所有浏览器都支持。
- focus：在元素获得焦点时触发，该事件不会冒泡，所有浏览器都支持。
- focusin：与focus事件等价，但是它冒泡。
- focusout：是HTML事件blur的通用版本。