JavaScript：事件之事件类型
我们把事件分为了三大类，分别是一般事件、表单事件和页面事件。当前我们可以再做细分：
1、UI事件：如load、unload、error、resize、scroll、select、DOMActive，是用户与页面上的元素交互时触发的。
（1）、load事件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>事件类型</title>
<script type="text/javascript" src="EventUtil.js"></script>
</head>
<body>
<center><input type="button" value="Click Me" id="myBtn"/></center><br />
<img src="7V5A54230.jpg" onload="alert('Image loaded')" id="myImage"/>
<script>
var image=document.getElementById("myImage");
EventUtil.addHandler(window,"load",function(event){
alert("Loaded!");
});
EventUtil.addHandler(image,"load",function(event){
event=EventUtil.getEvent(event);
var target=EventUtil.getTarget(event);
alert(target.src);
});
</script>
</body>
</html>
在创建新的<img>元素时，可以为其制定一个事件处理程序，以便图像加载完毕后给出提示，此时，最重要的是要在指定src属性之前先指定事件，例如：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>事件类型</title>
<script type="text/javascript" src="EventUtil.js"></script>
</head>
<body>
<script>
EventUtil.addHandler(window,"load",function(){
var image=document.createElement("img");
EventUtil.addHandler(image,"load",function(event){
event=EventUtil.getEvent(event);
alert(EventUtil.getTarget(event).src);
});
document.body.appendChild(image);
image.src="7V5A54230.jpg";
});
</script>
</body>
</html>
注意：新图像元素不一定要从添加到文档后才开始下载，只要设置了src属性就会开始下载。
<script>元素也会触发load事件，以便开发人员确定动态加载的JavaScript文件是否加载完毕。与图像不同，只有在设置了<script>元素的src属性并将该元素添加到文档后，才会开始下载JavaScript文件。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>事件类型</title>
<script type="text/javascript" src="EventUtil.js"></script>
</head>
<body>
<script>
EventUtil.addHandler(window,"load",function(){
var script=document.createElement("script");
EventUtil.addHandler(script,"load",function(event){
event=EventUtil.getEvent(event);
alert(EventUtil.getTarget(event).src);
});
script.src="jquery.js";
document.body.appendChild(script);
});
</script>
</body>
</html>
IE和Opera还支持<link>元素上的load事件，以便开发人员确定样式表是否加载完毕。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>事件类型</title>
<script type="text/javascript" src="EventUtil.js"></script>
</head>
<body>
<script>
EventUtil.addHandler(window,"load",function(){
var link=document.createElement("link");
link.type="text/css";
link.rel="stylesheet";
EventUtil.addHandler(link,"load",function(event){
event=EventUtil.getEvent(event);
alert(EventUtil.getTarget(event).src);
});
link.href="example.css";
document.getElementsByTagName("head")[0].appendChild(link);
});
</script>
</body>
</html>
（2）、onload事件：在文档被完全卸载后触发。
（3）、resize事件：当浏览器窗口被调整到一个新的高度或者宽度是，就会触发resize事件。
（4）、scroll事件：虽然scroll事件是在window对象发生的，但它实际表示的则是页面中相应元素的变化。
2、焦点事件：如blur、DOMFocusIn、DOMFocusOut、focus、focusin、focusout，在元素获得或失去焦点的时候触发，这些事件当中，最为重要的是blur和focus，有一点需要引起注意，这一类事件不会发生冒泡！
3、鼠标与滚轮事件：如click、dblclick、mousedown、mouseenter、mouseleave、mousemove、mouseout、mouseover、mouseup，是当用户通过鼠标在页面执行操作时所触发的。
4、滚轮事件：mousewheel（IE6+均支持）、DOMMouseScroll（FF支持的，与mousewheel效果一样）。是使用鼠标滚轮时触发的。
5、文本事件：textInput，在文档中输入文本触发。
6、键盘事件：keydown、keyup、keypress，当用户通过键盘在页面中执行操作时触发。
7、合成事件：DOM3级新增，用于处理IME的输入序列。所谓IME，指的是输入法编辑器，可以让用户输入在物理键盘上找不到的字符。compositionstart、compositionupdate、compositionend三种事件。
8、变动事件：DOMsubtreeModified、DOMNodeInserted、DOMNodeRemoved、DOMAttrModified、DOMCharacterDataModified等，当底层DOM结构发生变化时触发。IE8-不支持。
9、变动名称事件：指的是当元素或者属性名变动时触发，当前已经弃用！
对于事件的基本类型，随着HTML5的出现和发展，又新增了HTML5事件、设备事件、触摸事件、手势事件等各种事件，在后面我们再详细介绍。