Web API Event接口：https://developer.mozilla.org/zh-CN/docs/Web/API/Event
目录：
一、Event 接口简介
二、事件源（target）与事件（event）
三、事件监听器（eventListener）
四、创建事件与自定义事件实践
五、绑定事件监听器实践
一、Event 接口简介
Event 接口是页面中所有事件的直接或间接父接口，表示在DOM 中发生的任何事件。具体有哪些事件可以参考上面的Web API Event 接口，如MouseEvent 子接口提供了几个常用事件：click、dblclick、mousedown等。
二、事件源（target）与事件（event）
此处事件源用target而不要eventSource，但两者含义相同。事件源即触发该事件的元素，如点击按钮事件的target即为该按钮。事件（event）不用解释，就是指某个行为，event 对象通常不需创建，某个行为产生（如点击按钮）时，API 就会自动创建一个点击事件。
三、事件监听器（eventListener）
监听器即事件处理函数，是我们关注的焦点。为某个事件源的某个事件绑定事件监听器的三种方式：
方式一：元素 属性
<button οnclick="functionName()">按钮</button>说明：事件源：button；事件：click；事件监听器：functionName函数
方式二：DOM 属性
document.getElementById("eleId").οnclick=functionName;方式三：addEventListener 或attachEventif(window.addEventListener){ eleDom.addEventListener("click",listener[,options]);//注意事件名不带on}else{ eleDom.attachEvent("onclick",listener[,options]);}说明：
1、listener 参数：为实现了EventListener 接口的对象或函数（可以传入该事件，但事件必须作为第一个参数）；
2、options 参数：可选。有2中主要形式，形式1：
capture ：是否在捕获阶段执行该事件，默认false；
once，是否只执行一次，默认false；
passive：是否永远不能执行preventDefault()，默认false，当为true时，调用该函数将没效果。
形式2：
target.addEventListener(type, listener[, useCapture]);userCapture：boolean，默认false。表示是否使用捕获方式传送事件，当设置为true 时，其子元素中事件冒泡传送到当前元素时，当前元素的对应该事件不会触发，相当于对元素忽略了冒泡过程。
关于事件传送的3个阶段：
捕获阶段（capture phase）：事件从window到docuemnt 逐级传到target元素；
目标阶段（target phase）：事件传到target元素，执行该元素的该事件处理函数，开始冒泡阶段；
冒泡阶段（bubble phase）：事件从target元素以捕获阶段相反的顺序传播，直到window。
过程图：
解除事件监听器绑定：
target.removeEventListener("click",funcitonHandler).
四、创建事件与自定义事件
事件是不需要手动创建的，但也在此简单实践下。
实践目标：
点击一个按钮，为一个div创建一个自定义事件（名字为myEvent），监听到该事件后随机改变该div背景颜色。
代码：
<!DOCTYPE html><html><head><title>创建事件</title><meta charset="utf-8"><script type="text/javascript">function changeColor(){var random = Math.random();document.getElementById("test").style.backgroundColor = "#"+parseInt(random*1000);}function createEvt(){//创建已有类型的事件，如鼠标事件//var event = new MouseEvent("Event");//创建自己的事件var event = document.createEvent("Event");event.initEvent("myEvent",true,true);//定义事件名为myEventdocument.getElementById("test").dispatchEvent(event);//指派该事件到target}window.οnlοad=function(){if(window.addEventListener){document.getElementById("test").addEventListener("myEvent",changeColor);}else{document.getElementById("test").attachEvent("myEvent",changeColor);}}</script></head><body><div id="test" style="width:200px;height: 100px;background-color: gray"></div><button οnclick="createEvt()">改变div颜色</button></body></html>说明：
创建事件：感觉new Event("Event")与document.createEvent("Event")应该差不多，至于参数为什么是Event，暂时先不管。
指派事件：target.dispatchEvent(eventObj)，该方法有个返回值，boolean，当（该事件是可取消的，即cancelable为true）and（至少一个事件处理方法调用了event.preventDefault()）时返回false，否则返回true。
五、绑定事件监听器实践
可以参考http://www.jb51.net/article/67051.htm文章，主要总结两点：
1、通过dom属性（如ele.onclick）方式只能同时绑定一个事件处理函数，当绑定多个时，后面的会将前面的覆盖。
2、要绑定多个处理函数，可以通过addEventListener （或attachEvent）方式。
3、解除事件处理函数绑定：removeEventListener("click",functionHandler)。
4、阻止事件的capture、target、bubble阶段：event.stopPropagation()，即调用该方法后，事件将不在向上或向下传送，也不会执行当前元素之前绑定的事件处理函数（似乎是这样，暂时没空实践）。