javascript的事件处理模型分为 DOM事件处理模型和 IE事件处理模型。
一、DOM事件流模型
DOM事件流分为三个阶段：捕获阶段、目标阶段、冒泡阶段。
- 捕获阶段：自上而下，由document节点向目标节点传播事件的阶段。
- 目标阶段：目标节点正在处理处理事件的阶段。
- 冒泡阶段:自下而上，由目标节点向document节点传播的阶段。
在htm文件编如下代码：
|
代码示例 |
事件流程图解 |
|
<html> <head></head> <body> <div id="top"> <div id="mid"> <div id="bott">单击</div> </div> </div> </body> </html> |
 |
注：(1)stopPropagation():在事件流的任意位置，调用该方法可以停止事件的传播过程。
(2)preventDefault():通知浏览器不要执行与事件关联的默认动作。
(3)canBubble=false，当有该项设置时，则只包含捕获阶段和目标阶段。
(4)eventPhase:事件传播的当前阶段。
(5)target:触发此事件的元素（事件的目标节点）。
(6)currentTarget:事件传播过程中流经的所有对象。
二、DOM事件处理函数和对象
1、相关对象
- currentTarget:在事件流经过的所有节点均在经过时刻是currentTarget对象，
- EventListener:表示事件处理函数，每一个EventTarget对象均可添加一个或者多个EventListener对象。
2、手动指派事件：由程序触发事件。
步骤：
(1)调用DocumentEvent接口的CreateEvent()创建事件对象；
(2)调用事件对象的initEvent()或者是子接口的初始化事件方法。
(3)调用EventTarget接口的dispatchEvent()触发事件。
示例：
var evt=document.CreateEvent("MouseEvents"); //创建事件对象
evt.initMouseEvent("click",true,true,Window,0,0,0,0,0,false,false,false,false,0,null); //初始化事件方法
document.getElementById("button").dispatchEvent(evt) //触发事件
3、事件对象
事件对象作为唯一的参数传给事件处理函数，事件对象包含了DOM事件发生时的相关上下文信息。
Event 接口
interface Event{
const unsigned short //常量
CAPTURING_PHASE=1; //表示捕获阶段
AT_TARGET=2; //目标阶段
BUBBLING_PHASE=3; //冒泡阶段
readonly attribute //只读属性
DOMString type; //事件类型，如"click"
EventTarget target; //事件的目标对象，触发事件的源 即 事件的目标节点
EventTarget currentTarget; //事件的当前目标对象，在事件传播过程中流经的元素,可能是目标节点对象、冒泡和捕获过程流经的节点对象
unsigned short eventPhase; //事件传播的当前阶段
boolean bubbles; //事件是否是起泡事件类型
boolean cancelable; //(1)指示 preventDefault() 方法是否起作用；可以取消与事件关联的默认动作，则为 true，否则为 fasle
DOMTimeStamp timeStamp; //事件生成的日期和时间。
}
注：(1)：当 cancelable 为 true 时，preventDefault() 方法取消与事件关联的默认动作；fasle 则表示不能取消与事件关联的默认动作
三、IE事件相关知识
1、事件流阶段：IE 8 及更低版本的浏览器的 事件流只有两个阶段（目标阶段、冒泡阶段）。
2、Event对象：全局属性；不能把Event对象作为参数传递给事件处理程序，只能用window.event或者event来引用Event对象。
四、事件注册与移除——利用标签对象的 onclick 属性
该种方式适用于DOM和 IE 两种均可
1、事件注册
HTML ：
<button id="btn" onclick="alert(123)">CLICK</button>
<button id="btn2" onclick="eventHandler()">CLICK2</button>
javascript：
document.getElementById('btn2').onclick = eventHandler;
2、事件移除
document.getElementById('btn2').onclick = null;
3、阻止默认行为
利用 onclick 属性绑定事件处理方法的只需要在处理程序中 添加一条语句： return false;
<button id="btn" onclick="alert(123); return false;">
五、事件注册与移除——利用 javascript 方法
1、事件注册
DOM：
格式：addEventListener(type,listener,usecapture)
说明：type:事件类型，字符串，如"click"，此处type是不带 on 的。如 'click'
listener:函数名，事件的处理函数。
usecapture：在哪种阶段触发事件。true：只在捕获阶段触发事件；false：只在冒泡阶段触发事件。
IE： 格式：attachEvent(type,listener)；此处type是带 on 。如 'onclick' //因 IE8 及低版本不支持捕获阶段，所以没有第三个参数
2、事件移除
DOM：
格式：removeEventListener(type,listener,usecapture)
例：evt.currentTarget.removeEventListener("click",handmethod,evt.eventPhase==Event.CAPTURING_PHASE);
注：evt：事件对象；currentTarget:事件的当前目标；eventPhase：事件的所处阶段；Event.CAPTURING_PHASE：表示捕获阶段。
IE：detachEvent(type,listener) //因 IE8 及低版本不支持捕获阶段，所以没有第三个参数
3、阻止默认行为
DOM： 首先确保 Event接口对象的 cancelable=true; 再调用 Event接口对象的 preventDefault();
IE： window.even.treturnValue=false
六、MouseEvent对象
Event含有两个子接口，分别是UIEvent和MutationEvent，这两个子接口实现了Event的所有方法和属性，而 MouseEvent接口又是UIEvent的子接口，所以实现了UIEvent和Event的所有方法和属性。下面，我们就看看Event、UIEvent和MouseEvent的主要属性和方法。
1、UIEvent
- view：发生事件的window对象。
- detail：提供事件的额外信息，对于单击事件、mousedown和mouseup事件都代表的是点击次数。
2.MouseEvent
- button：一个数字，指明在mousedown、mouseup和单击事件中，鼠标键的状态，和IE中的button属性类似，但是数字代表的意义不一样，0代表左键，1代表中间键，2代表右键。
- altKey、ctrlKey、shiftKey、metaKey：和IE相同，但是IE没有最后一个。
- clientX、clientY：和IE的含义相同，相对于包容窗口的左上角生成的。但是在DOM标准中，这两个属性值都不考虑文档的滚动情况，也就是说，无论文档滚动到哪里，只要事件发生在窗口左上角，clientX和clientY都是0，所以在IE中，要想得到事件发生的坐标相对于文档开头的位置，要加上 document.body.scrollLeft和document.body.scrollTop。
- screenX、screenY：鼠标指针相对于显示器左上角的位置，如果你想打开新的窗口，这两个属性很重要。
- relatedTarget：和IE中的fromElement、toElement类似，除了对于mouseover和mouseout有意义外，其他的事件没什么意义
- offsetX/offsetY：鼠标指针相对于源元素的位置，可以确定单击Image对象的哪个象素。
- keyCode：返回keydown和keyup事件发生的时候，按键的代码以及keypress事件的Unicode字符。比如event.keyCode=13代表按下了回车键；
七、总结：
1、注册事件
function addEvent(el, type, fn)
{
if(el.addEventListener) //DOM模型
el.addEventListener(type, fn, false);
else //IE模型
el.attachEvent('on' + type, fn);
}
2、移除事件
function removeEvent(elem, type, fn)
{
if (elem.detachEvent)
elem.detachEvent('on' + type, fn);
if (elem.removeEventListener)
elem.removeEventListener(type, fn, false);
}
3、获取触发源
function eventHandler(e)
{
e = e || window.event; //IE、Chrome下是window.event， FF下是e ；//DOM模型通过参数传递获取事件对象，而 IE 通过全局变量 window.event 获取
var target = e.target || e.srcElement; ////DOM模型的触发源为target，而 IE 的为srcElement
}
4、取消事件默认操作
function eventHandler(e)
{
e = e || window.event;
if (e.preventDefault)
e.preventDefault(); //DOM模型
else
e.returnValue = false; //IE
}
5、停止事件传播
function stopEventHandler(e)
{
e = e || window.event; //DOM模型通过参数传递获取事件对象，而 IE 通过全局变量 window.event 获取
if (e.stopPropagation) //DOM模型
e.stopPropagation();
else
e.cancelBubble = true; //IE
}
6、 IE与DOM的区别
| 类别 | DOM | IE |
| 事件的目标节点 | target | srcElement |
| 事件的当前节点 | currentTarget | 无 |
| 注册事件 | addEventListener(type,listener,usecapture) | attachEvent(type,listener) |
| 移除事件 | removeEventListener(type,listener,usecapture) | detachEvent(type,listener) |
| 阻止事件默认行为 | Event接口对象的cancelable=true;preventDefault(); | window.even.treturnValue=false |
| 停止事件传播 | stopPropagation() | cancelBubble=true; |
| 事件对象 | 作为参数传递给处理程序 | IE8只能利用 window.even 获取事件对象 |
| 事件类型 type | 不带 on 如 'click' | 带 on 如 'onclick' |
| |
参考：http://www.jb51.net/article/31528.htm
http://www.nowamagic.net/librarys/veda/detail/1304
http://www.jb51.net/article/14296.htm