DOM3级事件规定了以下几类事件：
1.UI事件，当用户与页面的元素交互时触发
2.焦点事件，当元素获得或失去焦点时触发
3.鼠标事件，当用户通过鼠标在页面上执行操作时触发
4.滚轮事件，当使用鼠标滚轮（或类似设备）时触发
5.文本事件，当在文档中输入文本时触发
6.键盘事件，当用户通过键盘在页面上执行操作时触发
7.合成事件，当为IME（输入法编辑器）输入字符时触发
8.变动事件，当底层DOM结构发生变化时触发
9.变动名称事件，当元素或属性名变动时触发，此类事件已经被废弃
HTML5也定义了一组事件。。。
1.UI事件
1.1 load:当页面完全加载后（包括所有图像、JavaScript文件、CSS文件等外部资源），就会触发window上的load事件，有两种定义onload事件处理程序的方式，一种是用如下JavaScript代码：
EventUtil.addHandler(window,"load",function(event){ alert("Loaded"); });
第二种方法是在<body>元素中添加onload特性（不建议）
<body onload="alert('Loaded')"></body>
1.2 unload事件
与load事件对应的是unload事件，这个事件在文档被完全卸载后触发。只要用户从一个页面切换到另一个页面，就会发生unload事件。利用这个事件最多的情况是清除引用，以避免内存泄漏。用法跟load事件类似。
1.3 resize事件
当浏览器窗口被调整到一个新的高度或宽度时，就会触发resize事件.浏览器窗口最小化或最大化时也会触发resize事件。
1.4 scroll事件
虽然scroll事件时在windows对象上发生的，但实际表示的是页面中相应元素的变化。混杂模式下，可以通过<body>元素的scrollLeft和scrollTop来监控这一变化。
2.焦点事件
3.鼠标与滚轮事件
click:在用户单击主鼠标按钮或者按下回车键时触发。
dbclick:在用户双击主鼠标按钮时触发。
mousedown:在用户按下了任意鼠标按钮时触发。
mouseenter:在鼠标光标从元素外部首次移动到元素范围内时触发。
mouseleave:在位于元素上方的鼠标光标移动到元素范围之外时触发。
mousemove:当鼠标指针在元素内部移动时重复的触发。
mouseout:在鼠标指针位于一个元素上方，然后用户又将其移入另一个元素时触发。
mouseover:在鼠标指针位于一个元素外部，然后用户将其首次移入另一个元素边界之内时触发。
mouseup:在用户释放鼠标按钮时触发。
mouseover和mouseenter的区别：
1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <script type="text/javascript" src="jquery-2.2.2.min.js"></script> 5 <script type="text/javascript"> 6 x=0; 7 y=0; 8 $(document).ready(function(){ 9 $("div.over").mouseover(function(){ 10 $(".over span").text(x+=1); 11 }); 12 $("div.enter").mouseenter(function(){ 13 $(".enter span").text(y+=1); 14 }); 15 }); 16 </script> 17 </head> 18 <body> 19 <p>不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。</p> 20 <p>只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。</p> 21 <div class="over" style="background-color:lightgray;padding:20px;40%;float:left"> 22 <h2 style="background-color:white;">被触发的 Mouseover 事件：<span></span></h2> 23 </div> 24 <div class="enter" style="background-color:lightgray;padding:20px;40%;float:right"> 25 <h2 style="background-color:white;">被触发的 Mouseenter 事件：<span></span></h2> 26 </div> 27 </body> 28 </html>
只有在同一个元素上相继触发mousedown和mouseup事件，才会触发click事件，如果mousedown和mouseup中的一个被取消，就不会触发click事件。
触发一次dblclick事件需要经历以下事件：
(1)mousedown
(2)mouseup
(3)click
(4)mousedown
(5)mouseup
(6)click
(7)dblclick
鼠标事件中还有一类滚轮事件，即mousewheel事件。
3.1客户区坐标位置
clientX和clientY指的是浏览器视口上的坐标
3.2页面坐标位置
pageX和pageY表示事件在页面中的什么位置发生的，所以说页面在没有发生滚动时，(pageX,pageY)和(clientX,clientY)的值是一样的
1 EventUtil.addHandler(window,"load",function(){ 2 //在页面已经发生滚动的条件下 3 var body=document.body; 4 EventUtil.addHandler(body,"click",function(event){ 5 event=EventUtil.getEvent(event); 6 alert(event.clientX+","+event.clientY);//(471,369) 7 }); 8 EventUtil.addHandler(body,"click",function(event){ 9 event=EventUtil.getEvent(event); 10 alert(event.pageX+","+event.pageY);//(471,1369) 11 }); 12 })
IE8及更早版本不支持事件对象上的页面坐标，不过使用客户区坐标和滚动信息可以计算出来。这时候需要用到document.body(混杂模式)或document.documentElement(标准模式)中的scrollLeft和scrollTop属性。
1 var div=document.getElementById("myDiv"); 2 EventUtil.addHandler(div,"click",function(event){ 3 event=EventUtil.getEvent(event); 4 var pageX=event.pageX; 5 var pageY=event.pageY; 6 7 if(pageX===undefined){ 8 pageX=event.clientX+(document.body.scrollLeft||document.documentElement.scrollLeft); 9 } 10 if(pageY===undefined){ 11 pageY=event.clientY+(document.body.scrollTop||document.documentElement.scrollTop); 12 } 13 alert("Page coordinates:"+pageX+","+pageY); 14 });
3.3屏幕坐标位置
screenX和screenY表示相对于整个电脑屏幕的位置。
3.4修改键
虽然鼠标事件主要是使用鼠标来触发的，但在按下鼠标时键盘上的某些键的状态也可以影响到所要采取的操作。这些修改键是Shift、Ctrl、Alt、Meta,它们经常被用来修改鼠标事件的行为。
表示这些修改键的状态的属性为：shiftKey,ctrlKey,altKey,metaKey.这些属性包含的都是布尔值，如果相应的键按下了则值为true，否则为false。
1 var div=document.getElementById("myDiv"); 2 EventUtil.addHandler(div,"click",function(event){ 3 event=EventUtil.getEvent(event); 4 var keys=new Array(); 5 6 if(event.shiftKey){ 7 keys.push("shift"); 8 } 9 if(event.ctrlKey){ 10 keys.push("ctrl"); 11 } 12 if(event.altKey){ 13 keys.push("alt"); 14 } 15 if(event.metaKey){ 16 keys.push("meta"); 17 } 18 alert("Keys:"+keys.join(",")); 19 });