DOM 事件

1、注册事件

　　 // 事件处理函数
　　function handleMouseOver(event) {
　　　　// process
　　　　......
　　}

　　p.addEventListener("mouseover", handleMouseOver, [true | false]);

　　给 元素 p 注册一个 mouseover 事件监听器。

　　如果最后一个参数为 true，表示元素 p 的子孙元素触发事件流后，浏览器在 捕获阶段 会执行给元素 p 注册的 handleMouseOver（）事件函数。

　　如果最后一个参数为 false，表示元素 p 的子孙元素触发事件流后，浏览器在 冒泡阶段 会执行给元素 p 注册的 handleMouseOver（）事件函数。

2、删除事件

　p.removeEventListener("mouseover");

3、DOM 事件 event 对象的函数和属性　　　　

type	事件的名称（比如 mouseover）	字符串
target	事件的目标元素	HTMLElement
currentTarget	处理事件的当前元素	HTMLElement
eventPhase	事件生命周期的阶段　 　　CAPTURING_PHASE　　，　　此事件处于捕获阶段 　　AT_TARGET　　　　　　，　　此事件处于目标阶段 　　BUBBLING_PHASE　　  ，　　此事件处于冒泡阶段	数值
bubbles	如果事件在文档中支持冒泡则返回 true，否则返回 false	布尔值
cancelable	如果事件有可撤销的默认操作则返回 true，否则返回 false	布尔值
timeStamp	事件的创建时间，如果时间不可用则为 0	字符串
stopPropagation()	在当前元素的事件监听器被触发后，终止事件在 DOM 元素树中的传播；	void
stopImmediatePropagation()	立即终止事件在 DOM 元素树中的传播； 当前元素上未被触发的事件监听器会被忽略	void
preventDefault()	阻止浏览器执行与事件关联的默认操作	void
defaultPrevented	如果调用过 preventDefault() ，则返回 true	布尔值

4、事件流

　　一个事件的生命周期包括三个阶段：捕获(capture)、目标(target)、冒泡(bubbling)。

4.1、捕获阶段

　　当某个事件被触发时，浏览器会找出事件涉及的元素，它被称为该事件的目标元素。

　　浏览器会找出 body 元素和目标元素之间的所有元素，并分别检查它们，看看它们是否注册了事件处理器？

　　如果注册了，那么浏览器先执行这些中间元素的事件处理器，然后，才会执行目标元素的事件处理器。

　　

　　事件捕获让目标元素的上级元素都有机会在事件传递到目标元素之前，对事件进行预处理，

　　这样的话，上级元素的事件处理器就可以阻止事件传递到目标元素。

　　阻止的方法是对 Event 对象调用 stopPropagation() 或者 stopImmediatePropagation() 函数。

　　这两个函数的区别在于，stopPropagation() 确保执行当前元素上注册的所有未执行事件监听器。

　　而 stopImmediatePropagation() 则忽略当前元素上注册的所有未执行事件监听器。

　　调用以上两个方法的意思就是，浏览器的捕获阶段在当前元素处结束，不再检查其他任何元素，并且会跳过目标和冒泡阶段。

4.2、目标阶段

　　当此阶段是三个阶段中最简单的，当捕获阶段完成后，浏览器会触发目标元素上的所有注册事件监听器。

　　如果在此阶段调用了stopPropagation()或者stopImmediatePropagation()，那么就会终止事件流，不再进入冒泡阶段。

4.3、冒泡阶段

　　完成目标阶段之后，浏览器开始沿着目标元素往 body 元素前进，浏览器检查沿途的每个上级元素，如果存在

　　针对该事件类型的已注册事件但没有启用捕获的监听器（意思就是，addEventListener()时的第三个参数为 false）的注册事件函数，则执行。

注意：

　　并不是所有事件都支持冒泡，可以用 bubbles 属性来检查某个事件能否冒泡？为 true 则支持，为 false 则不支持。

5、文档、窗口事件

　　　　

6、鼠标事件

　　　　

7、键盘事件