DOM 事件

何为 DOM 事件，HTML DOM 使JavaScript 有能力对 HTML 事件做出反应。（例如，点击 DOM 元素，键盘被按，输入框输入内容以及页面加载完毕等）

事件流

一个 DOM 事件可以分为捕获过程、触发过程、冒泡过程。 DOM 事件流为 DOM 事件的处理及执行的过程。下面以一个<a>元素被点击为例。

[红虚线]Capture Phase（事件捕获过程）当 DOM 事件发生时，它会从window节点一路跑下去直到触发事件元素的父节点为止，去捕获触发事件的元素。[红绿实线]Target Phase（事件触发过程）当事件被捕获之后就开始执行事件绑定的代码[绿虚线]Bubble Phase（冒泡过程）当事件代码执行完毕后，浏览器会从触发事件元素的父节点开始一直冒泡到window元素（即元素的祖先元素也会触发这个元素所触发的事件）

关于捕获过程的补充

如果有一个支持三个阶段的事件，它一定在触发时遵循下面的顺序：

Capture -> Target -> Bubbling

使用下面的代码来举例：

// 添加Capture阶段事件docuemnt.addEventListener('click',function(){ alert('capture：'+1);},true);tableNode.addEventListener('click',function(){ alert('capture：'+2);},true);tdNode.addEventListener('click',function(){ alert('capture：'+3);},true);// 添加Bubbling阶段事件docuemnt.addEventListener('click',function(){ alert('bubble：'+1);});tableNode.addEventListener('click',function(){ alert('bubble：'+2);});tdNode.addEventListener('click',function(){ alert('bubble：'+3);});

输出结果为：

capture：1capture：2capture：3bubble：3bubble：2bubble：1

// 对document添加了三个bubbling阶段的事件document.addEventListener('click',function(){ alert(1);});document.addEventListener('click',function(){ alert(2);});document.addEventListener('click',function(){ alert(3);});

如上面的代码所示，其为同一节点添加了同一阶段的多个事件，那执行顺序如何呢？ 早期并没有规范定义，DOM3 中规范已经明确规定 同一节点同一阶段的事件应按照注册函数的顺序执行。

注册事件

eventTarget.addEventListener(type, listener[,useCapture])

evenTarget 表示要绑定事件的DOM元素type 表示要绑定的事件，如："click"listener 表示要绑定的函数useCapture 可选参数，表示是否捕获过程取消事件

eventTarget.removeEventListener(type, listener[,useCapture]);

evenTarget 表示要绑定事件的DOM元素type 表示要绑定的事件，如："click"listener 表示要绑定的函数useCapture 可选参数，表示是否捕获过程

// 获取元素var elem = document.getElemenyById('id');// 取消事件elem.removeEventListener('click', clickHandler, false);// 第二种方式。不建议使用elem.onclick = null;

触发事件

点击元素，按下按键均会触发 DOM 事件，当然也可以以通过代码来触发事件。

eventTarget.dispatchEvent(type);// 获取元素var elem = document.getElemenyById('id');// 触发事件elem.dispatchEvent('click');

通用属性和方法

属性

type 事件类型target(srcElement IE 低版本) 事件触发节点currentTarget 处理事件的节点

方法

stopPropagation 阻止事件冒泡传播preventDefault 阻止默认行为stopImmediatePropagation 阻止冒泡传播

阻止事件传播

event.stopPropagation()（W3C规范方法），如果在当前节点已经处理了事件，则可以阻止事件被冒泡传播至 DOM 树最顶端即 window 对象。

event.stopImmediatePropagation() 此方法同上面的方法类似，除了阻止将事件冒泡传播值最高的 DOM 元素外，还会阻止在此事件后的事件的触发。

event.cancelBubble=true 为 IE 低版本中中对于阻止冒泡传播的实现。

阻止默认行为

默认行为是指浏览器定义的默认行为（点击一个链接的时候，链接默认就会打开。当我们双击文字的时候，文字就会被选中），比如单击链接可以打开新窗口。

Event.preventDefault() 为 W3C 规范方法，在 IE 中的实现方为 Event.returnValue=false。

事件代理

事件代理是指在父节点上（可为元素最近的父节点也可为上层的其他节点）处理子元素上触发的事件，其原理是通过事件流机制而完成的。可以通过事件对象中获取到触发事件的对象（如下所示）。

var elem = document.getElemenyById('id');elem.addEventListener('click', function(event) { var e = event || window.event; var target = e.target || e.srcElement; // statements});

优点

需要管理的事件处理函数更少内存分配更少，更高效增加与删除子节点可以不额外处理事件

缺点

事件管理的逻辑变的复杂（因为冒泡机制）