DOM事件（上）

1 事件流

什么是DOM事件？？
点击一个DOM元素
键盘按下一个键
输入框输入内容等等这些都会触发DOM事件

事件流分为三个过程
1. capture phase 事件捕获过程
2. target phase 事件的触发过程
3. bubble phase 事件的冒泡过程
比如如图DOM树中，点击标签触发click事件的事件流

1. capture phase

一个事件的捕获过程。从DOM树顶点window开始捕获到触发事件元素的父元素停止，然后进入target phase 过程

2. target phase

是目标节点元素的触发过程，图中为红色实线和绿色实线部分。

3. bubble phase

最后是事件的冒泡过程，注意是从目标节点的父元素开始冒泡到顶层的window对象。为图中新增的绿色虚线部分。

总结

并不是所有浏览器都有这三个过程，比如低版本的IE浏览器就没有target phase过程
不是所有事件都有这三个过程。有些事件就没有冒泡过程
比如页面的load事件就没有冒泡过程。

---

2 事件注册与触发

1.事件注册
2.取消事件注册
3.事件触发
这三者的主体都是DOM元素

1.事件注册

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

–type:事件类型。
—listener:处理
–useCapture 设置是否是捕获过程，默认为false.冒泡过程。

elem.addEventListener(‘click’, clikcHandler, false);
elem.onclick = clickHandler;
两者的区别在与元素使用addEventListener()时能同时为click事件注册多个处理程序。而elem.onclick则只能有一个处理程序。
比如还可以增加click事件的注册事件处理函数，且有效
elem.addEventListener(‘click’, otherclikcHandler, false);

---

2.取消事件注册

eventTarget.removeEventListener( type, listener [, useCapture]);
或者
elem.onclick = null;//不建议用这种方式

---

3.事件触发

有两种方式触发事件
1.人为触发
2.程序触发

eventTarget.dispatchEvent(type)

elem.dispatchEvent('click');//触发elem元素的点击事件。

浏览器兼容型 （IE6,7,8）

事件这侧与取消
--attchEvent/detachEvent

事件触发
-- fireEvent(e);

no capture  :没有捕获阶段，有冒泡阶段。

兼容代码