JavaScript与HTML之间的交互是通过事件实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。
1、事件流：描述的是从页面中接收事件的顺序。
IE提出的事件冒泡流：事件开始由最具体的元素接收，然后向上传播到较为不具体的节点。
Nerscape提出的事件捕获流：由最不具体的元素逐渐传播到最具体的节点。
DOM2级事件规定了事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，为截获事件提供了机会。然后实际的目标接收到事件。最后一个阶段是冒泡阶段，可以在这个阶段对事件做出响应。
2、事件处理程序：响应事件的函数。名字一般以“on”开头，如onclick、onload、onmouseover... 添加事件处理程序有3种方法：HTML事件处理程序、DOM0级事件处理程序、DOM2级事件处理程序.
HTML事件处理程序：某个元素支持某种事件，都可以使用一个与相应事件处理程序同名的HTML特性来指定。
例如： ,由于这个值是JavaScript，因此不能在其中使用未转义的HTML语法字符，例如&、“”、<、>。若要使用引号，可以这么来用：
DOM0级事件处理程序：将一个函数赋值给一个事件处理程序。例如：
1 var btn = document.getElementById("myBtn");2 btn.onclick = function(){3 alert("Click");4 };
同时，也可以删除DOM0级方法指定的事件处理程序，只要设置为null即可： btn.onclick = null; //删除DOM0级事件处理程序
DOM2级事件处理程序：“DOM2级事件”定义了俩个 方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()，接收3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值，布尔值如果为true，表示在捕获阶段调用事件处理函数；如果是false(默认)，在冒泡阶段调用。同时，IE有自己“独特”的事件处理程序去替代这俩个方法：attachEvent()和detachEvent().这样一来，我们就得苦逼的想着如何兼容俩者了，常用的做法如下：
1 var eventUtil={ //type事件不加on！ 2 //添加句柄 3 addHandle:function (element,type,handler){ 4 if(element.addEventListener){ 5 element.addEventListener(type,handler,false); 6 }else if(element.attachEvent){ 7 element.attachEvent("on"+type,handler); 8 }else{ 9 element["on"+type].handler;10 }11 }12 //删除句柄---匿名函数不能被移除13 removeHandle:function (element,type,handler){14 if(element.removeEventListener){15 element.removeEventListener(type,handler,false);16 }else if(element.detachEvent){17 element.detachEvent("on"+type,handler);18 }else{19 element["on"+type]=null;20 }
21 }22 }
23 24 eventUtil.addHandle(oBtn,'click',show); //调用方法
3、事件对象：在触发DOM上的某个事件时，会产生一个事件对象event，这个对象包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。
事件对象的获取和属性方面，IE有显得那么“特殊”。因此，我们处处要想着兼容它。有关事件对象和对象属性，常用的兼容方法如下：
1 var eventUtil={
2 //获取事件对象 3 getEvent : function (event){ 4 return event ? event : window.event; 5 } 6 //获取事件目标 7 getElement : function(event){ //传入获取到的事件对象 8 return event.target || event.srcElement; 9 }10 //阻止事件冒泡11 stopPropagation:function(event){ //传入获取到的事件对象 12 if(event.stopPropagation){13 event.stopPropagation;14 }else{15 event.cancelBubble=true;16 }17 }18 //阻止默认行为19 preventDefault:function(event){ //传入获取到的事件对象 20 if(event.preventDefault){21 event.preventDefault;22 }else{23 event.returnValue=false;24 }
25 }26 }
具体用法：
use
4、事件类型：Web浏览器中可能发生的事情有很多类型，不同的事件类型具有不同的信息。 “DOM3级事件”规定了以下几类属性：
UI（User Interface，用户界面）事件，当用户与页面上的元素交互时触发；
焦点事件，当元素获取或失去焦点时触发；
鼠标事件，当用户通过鼠标在页面上执行操作时触发；
滚轮事件，当使用滚轮（或类似设备）时触发；
文本事件，当在文档中输入文本时触发；
键盘事件，当用户通过键盘在页面上执行操作时触发；
合成事件，当为IME（Input Method Editor，输入法编辑器）输入字符时触发；
变动（mutation）事件，当底层DOM结构发生变化时触发；
变动名称事件，当元素或属性名变动时触发。此类事件已被废弃。
4.1 UI事件：指的是那些不一定与用户操作有关的事件。这些事件在DOM规范出现之前，都是以这种形式存在的，现有的UI事件如下：
load：当页面完全加载后再window上触发。
unload：当页面完全卸载后再window上触发。
error：当发生JavaScript错误时在window上面触发。
select：当用户选择文本框（或