标签：
UI事件
UI（User Interface，用户界面）事件，指的是那些不一定与用户操作有关的事件。
UI事件包括load、unload、abort、error、select、resize、scroll。
这些事件在DOM2级事件中都归为HTML事件；要确定浏览器是否支持DOM2级事件中规定的HTML事件，可以使用如下代码：
1 var isSupported = document.implementation.hasFeature("HTMLEvents", "2.0"); 2 alert(isSupported); //true
注意：只有根据“DOM2级事件”实现这些事件的浏览器才会返回true，而以非标准方式支持这些事件的浏览器会返回false。
要确定浏览器是否支持“DOM3级事件”定义的事件，可以使用如下代码：
1 var isSupported = document.implementation.hasFeature("UIEvent", "3.0"); 2 alert(isSupported); //true
html代码
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>事件类型</title> 6 </head> 7 <body> 8 <div id="box"> 9 <input type="button" id="btn" value="button"> 10 </div> 11 <script src="事件对象.js"></script> 12 <script type="text/javascript"> 13 </script> 14 </body> 15 </html>
load事件
当页面完全加载后（包括所有图像、JavaScript文件、CSS文件等外部文件），就会触发window上面的load事件。
1 var btn = document.getElementById("btn"); 2 event_util.addHandler(window, "load", function(event) { 3 alert("Hello"); 4 alert(event.type); //load 5 });
注意：根据“DOM2级事件”规范，应该在document而非window上触发load事件；但是所有浏览器都在window上实现了该事件，以确保向后兼容。
在创建新的<img>元素时，可以为其指定一个事件处理程序，以便图像加载完成后给出提示。
新图像元素不一定要从添加到文档后才开始下载，只要设置了src属性就会开始下载。
此时，最重要的是在指定src属性之前先指定事件，如下：
1 event_util.addHandler(window, "load", function() { 2 var image = document.createElement("img"); 3 event_util.addHandler(image, "load", function(event) { //在指定src属性前先指定事件 4 event = event_util.getEvent(event); 5 alert("Hello"); 6 alert(event.target.src); 7 }); 8 image.src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg"; 9 document.body.appendChild(image); 10 });
但是如果在指定src属性之后指定事件，如下：
1 event_util.addHandler(window, "load", function() { 2 var image = document.createElement("img"); 3 image.src="http://imgsrc.baidu.com/forum/w%3D580/sign=0c101fe665380cd7e61ea2e59145ad14/f9a3492762d0f7032de1758a08fa513d2797c542.jpg"; 4 document.body.appendChild(image); 5 event_util.addHandler(image, "load", function(event) { //在指定src属性后才指定事件 6 event = event_util.getEvent(event); 7 alert("Hello"); 8 alert(event.target.src); 9 }); 10 });
两种方式并无差别，为什么非要选第一种，还特别说明？
在IE9+、Firefox、Opera、Chrome、Safari3+及更高版本中，<srcipt>元素也能触发load事件。
只有在设置了<srcipt>元素的src属性并将其添加到文档后，才会开始下载JavaScript文件。
对于<script>元素而言，指定src属性与指定事件处理程序的顺序不重要。
IE和Opera还支持<link>元素上的load事件，以方便开发人员确定样式表是否已经加载完毕。
与<srcipt>元素类似，在未指定其href属性并将其添加到文档之前，样式表不会开始下载。
unload事件
这个事件在文档被完全卸载后触发。
只要用户从一个页面切换到另一个页面，就会触发unload事件。
利用这个事件最多的情况是清除引用，以避免内存泄漏。
1 event_util.addHandler(window, "unload", function() { 2 alert("Good bye!"); 3 });
亲测，上述代码只能在IE中有效，在Firefox及Chrome中无效，为何？
注意：根据“DOM2级事件”规范，应该在<body>元素而非window上触发unload事件；但是所有浏览器都在window上实现了该事件，以确保向后兼容。
resize事件
当浏览器窗口被调整到一个新的高度或者宽度时，就会触发resize事件。
这个事件在window上触发。
1 event_util.addHandler(window,"resize", function() { 2 alert("The window has been resized!"); 3 });
浏览器窗口最大化或最小化也会触发resize事件。
srcoll事件
虽然srcoll事件是在window对象上触发的，但它实际表示的是页面中相应元素的变化。
在标准模式下， 除Safari外所有的浏览器都会通过<html>元素来反映这一变化；Safari仍然基于<body>元素跟踪滚动位置。
1 event_util.addHandler(window, "scroll", function() { 2 if(document.compatMode == "CSS1Compat") { 3 alert(document.documentElememt.scrollTop); 4 } else { 5 alert(document.body.scrollTop); 6 } 7 });
abort事件
在用户停止下载过程时，如果嵌入的内容没有加载完，则在<object>元素上触发。
error事件
传送门有待补充。。。
select事件
传送门有待补充。。。
标签：
原文地址：http://www.cnblogs.com/cc156676/p/5741417.html
