前言
事件是用来实现js和html之间交互的，可以用侦听器（或处理程序）来预订事件，以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式的模型，支持页面的行为（js）与页面的外观（html和css）的松散耦合。事件最早是在IE3和Netscape Navigator2中出现的，当时是作为分担服务器运算负载的一种手段。
一、事件流
事件流描述的是从页面中接收事件的顺序。IE的事件流是事件冒泡流，而Netscape Communicator 的事件流是事件捕获流。
1、事件冒泡
IE 的事件流叫做事件冒泡，即事件开始时由最具体的元素 (文档中嵌套层次最深的那个节点) 接收，然后逐级向上传播到较为不具体的节点(文档)。比如单击了页面中的<div>元素，那么这个click事件会按照如下顺序逐级向上传播，直至传播到 document 对象。
注意：所有现代浏览器都支持事件冒泡，但在具体实现上还是有一些差别。IE5.5及更早版本中的事件冒泡会跳过 <html> 元素 (从 <body> 直接跳到 document) 。Firefox、Chrome 和 Safari 则将事件一直冒泡到 window 对象。
2、事件捕获
事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前捕获它。前面的例子的事件捕获过程为：
3、DOM事件流
“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。同样前面的例子触发事件的顺序为：
IE9、Opera、Firefox、Chrome和Safari都支持DOM事件流；IE8及更早版本不支持DOM事件流。
二、事件处理程序
事件就是用户或浏览器自身执行的某种动作。而响应某个事件的函数就叫做事件处理程序 (或事件侦听器)。事件处理程序的名字以 "on" 开头，比如 click 事件的事件处理程序就是 onclick。为事件指定处理程序的方式有以下几种。
1、HTML事件处理程序
在HTML中定义的事件处理程序可以包含要执行的具体动作，也可以调用在页面其他地方定义的脚本。
<input type="button" value="Click Me" οnclick="alert(this.value)" /> 或者
<script type="text/javascript">
function showMessage(){
alert("Hello world!");
}
</script>
<input type="button" value="Click Me" οnclick="showMessage()" /> 注意：不能再其中使用未经转义的HTML语法字符，例如和号（&）、双引号（""）、小于号（<）或大于号（>）。
在HTML中指定事件处理程序有三个缺点。1、存在一个时差问题。因为用户可能会在HTML元素一出现在页面上就触发相应的事件，但当时的事件处理程序有可能尚不具备执行条件。为此，很多HTML事件处理程序都会被封装在一个try-catch块中，以便错误不会浮出水面。2、这样扩展事件处理程序的作用域在不同浏览器中会导致不同结果。不同js引擎遵循的标识符解析规则略有差异，很可能会在访问非限定对象成员时出错。3、html与js代码紧密耦合，更换事件处理程序改动较大。
2、DOM0级事件处理程序
通过 JavaScript 指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性。这种为事件处理程序赋值的方法是在第四代Web浏览器中出现的，而且至今仍然为所有现代浏览器所支持。原因一是简单，二是具有跨浏览器的优势。
每个元素都有自己的事件处理程序属性，如onclick等。可以通过js将一个函数赋值给元素的事件处理程序属性。在DOM0事件处理程序中，事件处理程序里的this指向当前元素。
var objlogo=document.getElementById("site_nav_top");
objlogo.οnclick=function(){
alert(this.innerHTML);//代码改变世界
}删除DOM0事件，只需将事件处理程序的值赋为null即可。
objlogo.οnclick=null;3、DOM2级事件处理程序
“DOM2级事件”定义了两个方法，addEventListener() 和 removeEventListener()，它们都接受3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是 true，表示在捕获阶段调用事件处理程序；如果是 false，表示在冒泡阶段调用事件处理程序。addEventListener()可以为元素添加多个事件处理程序，触发时会按照添加顺序依次调用。removeEventListener()不能移除匿名添加的函数。
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
alert(this.id);
}, false);
var handler = function(){
alert("Hello world!");
};
btn.addEventListener("click", handler, false);
// 这里省略了其他代码
btn.removeEventListener("click", handler, false); // 有效！以上代码会先显示id，再显示hello world。大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段，这样可以最大限度地兼容各种浏览器。IE9、Opera、Firefox、Chrome和Safari都支持DOM2级事件处理程序。
4、IE事件处理程序
IE 实现了与DOM中类似的两个方法：attachEvent() 和 detachEvent()。这两个方法接受相同的两个参数：事件处理程序名称与事件处理程序函数。由于IE只支持事件冒泡，所以通过 attachEvent() 添加的事件处理程序都会被添加到冒泡阶段。
在使用DOM0级方法的情况下，事件处理程序会在其所属元素的作用域内运行；在使用 attachEvent() 方法的情况下，事件处理程序会在全局作用域中运行，因此 this 等于 window 。并且，与DOM 方法不同的是，这些事件处理程序不是以添加它们的顺序执行，而是以相反的顺序被触发。
注意：1、事件名前面有on前缀；2、在事件处理程序的函数中，this不再指向当前元素，而是指向window对象。
var btn = document.getElementById("myBtn");
var handler = function(){
alert("Clicked");
};
btn.attachEvent("onclick", handler);
// 这里省略了其他代码
btn.detachEvent("onclick", handler); 支持IE事件处理程序的浏览器有IE和Opera。
5、跨浏览器的事件处理程序
第一个要创建的方法是 addHandler()，它的职责是视情况分别使用DOM0级方法、DOM2级方法或IE方法来添加事件，它属于一个名叫 EventUtil 的对象。addHandler()方法接受3个参数：要操作的元素、事件名称和事件处理程序函数。EventUtil的用法如下所示：
var EventUtil = {
addHandler: function(element, type, handler){
if (element.addEventListener){
element.addEventListener(type, handler, false);
} else if(element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
},
removeHandler: function(element, type, handler){
if (element.removeEventListener){
element.removeEventListener(type, handler, false);
} else if(element.detachEvent){
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = null;
}
}
}; 使用EventUtil对象的实例如下：
var btn = document.getElementById("myBtn");
var handler = function(){
alert("Clicked");
};
EventUtil.addHandler(btn, "click", handler);
// 这里省略了其他代码
EventUtil.removeHandler(btn, "click", handler); 6、事件回调函数的作用域问题
事件绑定函数时，该函数会以当前元素为作用域执行。
(1)使用匿名函数
我们为回调函数包裹一层匿名函数。包裹之后，虽然匿名函数的作用域被指向事件触发元素，但执行的内容就像直接调用一样，不会影响其作用域。
(2)使用 bind 方法
使用匿名函数是有缺陷的，每次调用都包裹进匿名函数里面，增加了冗余代码等，此外如果想使用 removeEventListener 解除绑定，还需要再创建一个函数引用。Function 类型提供了 bind 方法，可以为函数绑定作用域，无论函数在哪里调用，都不会改变它的作用域。
三、事件对象
在触发 DOM 上的某个事件时，会产生一个事件对象 event，这个对象中包含着所有与事件有关的信息。
1、DOM中的事件对象
兼容 DOM 的浏览器会将一个 event 对象传入到事件处理程序中。event 对象包含与创建它的特定事件有关的属性和方法。触发的事件类型不一样，可用的属性和方法也不一样。不过，所有事件都会有下表列出的成员。
在事件处理程序内部，对象 this 始终等于 currentTarget 的值，而 target 则只包含事件的实际目标。如果直接将事件处理程序指定给了目标元素，则 this 、currentTarget 和 target 包含相同的值。
2、IE中的事件对象
在使用 DOM0 级方法添加事件处理程序时，event 对象作为 window 对象的一个属性存在。如果是通过 HTML 特性指定的事件处理程序，那么还可以通过一个名叫 event 的变量来访问 event 对象 (与 DOM 中的事件模型相同)。IE 的 event 对象同样也包含与创建它的事件相关的属性和方法。
3、跨浏览器的事件对象
综合考虑DOM和IE中的事件对象，写出跨浏览器的事件对象，放在之前的EventUtil中。
var EventUtil = {
addHandler: function(element, type, handler){
// 省略了其他代码
},
getEvent: function(event){
return event? event: window.event;
},
getTarget: function(event){
return event.target || event.srcElement;
},
preventDefault: function(event){
if (event.preventDefault){
event.preventDefault();
} else {
event.returnValue = false;
}
},
removeHandler: function(element, type, handler){
// 省略了其他代码
},
stopPropagation: function(event){
if (event.stopPropagation){
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
}; 四、事件类型
Web浏览器中可能发生的事件有很多类型。如前所述，不同的事件类型具有不同的信息，而 "DOM3级事件" 规定了下列几类事件：
UI事件：在用户与页面上的元素交互时触发；
鼠标事件：当用户通过鼠标在页面上执行操作时触发；
滚轮事件：当使用鼠标滚轮（或类似设备）时触发；
文本事件：当在文档中输入文本时触发；
键盘事件：当用户通过键盘在页面上执行操作时触发；
合成事件：当为IME（Input Method Editor,输入法编辑器）输入字符时触发；
变动 (mutation) 事件：当底层 DOM 结构发生变化时触发。
1、UI事件
(1)load事件：load可以用来判断图片加载完毕。注意：新创建的图像元素不是在加载到页面中才开始下载，而是设置src之后就开始下载。load可以用来判断js加载完成。<script>元素可以触发load事件，来判断动态加载的js文件是否加载完成。它和img不同，必须设置了src属性并且添加到文档之后才会开始下载。
(2).unload事件
(3).resize事件
注意：关于何时会触发resize事件，不同浏览器有不同的机制。IE、Safari、Chrome和Opera会在浏览器窗口变化了1像素时就触发resize事件，然后随着变化不断重复触发。Firefox则只会在用户停止调整窗口大小时才会触发resize事件。
(4).scroll事件
2、焦点事件
焦点事件会在页面元素获得或失去焦点时触发，利用这些事件并与document.hasFocus()方法及document.activeElement属性配合，可以知晓用户在页面上的行踪。有以下6个焦点事件：blur、DOMFocusIn、DOMFocusOut、foucs、focusin、focusout。
3、鼠标与滚轮事件
DOM3级事件定义了9个鼠标事件：click、dblclick、mousedown、mouseenter、mouseleave、mousemove、mouseout、mouseover、mouseup。
鼠标事件中还有一类滚轮事件mousewheel事件。
(1).客户区坐标位置：clientX和clientY属性。
(2).页面坐标位置：pageX和pageY属性。
(3).屏幕坐标位置：screenX和screenY属性。
(4).修改键：shiftKey、ctrlKey、altKey、metaKey。
(5).相关元素：DOM通过event对象的relatedTarget属性提供了相关元素的信息。而在IE中，mouseover事件触发时，fromElement保存了相关元素，mouseout事件触发时，toElement保存了相关元素。
(6).鼠标按钮
(7).更多的事件信息
(8).鼠标滚轮事件：mousewheel事件中包含wheelDelta属性，Firefox支持类似的DOMMouseScroll事件，包含detail属性。
4、键盘与文本事件
DOM3级含有3个键盘事件：keydown、keypress、keyup。
1.键码：keyCode属性
2.字符编码：charCode属性
3.DOM3级变化：新属性（key、char、location属性：表示按下了什么位置上的键），getModifierState()方法。
4.textinput事件：data属性：表示用户输入的字符（而非字符编码）、inputMethod属性：表示把文本输入到文本框中的方式。
5、复合事件：用以处理IME的输入序列的一类事件。 6、变动事件：删除节点、插入节点等。 7、HTML5事件
1.contextmenu事件：用以表示何时应该显示上下文菜单。
2.beforeunload事件：让开发人员有可能在页面卸载前阻止这一操作。
3.DOMContentLoaded事件：在形成完整的DOM树之后触发。
4.readystatechange事件：提供与文档或元素的加载状态有关的信息。
5.pageshow和pagehide事件：pageshow事件在页面显示时触发，pagehide事件在浏览器卸载页面时触发。
6.hashchange事件：以便在URL的参数列表发生变化时通知开发人员。
8、设备事件
1.orientationchange事件
2.MozOrientation事件
3.deviceorientation事件
4.devicemotion事件
9、触摸与手势事件
1.触摸事件
2.手势事件
五、内存和性能
1.事件委托
事件委托可以解决页面中事件处理程序过多的问题。事件委托利用了事件冒泡，只指定一个事件处理程序，就可以处理某一类型的所有事件。
EventUtil.addHandler(document.body, 'click', function (event) {
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
switch (target.id) {
case 'site_nav_top':
alert('口号');
break;
case 'nav_menu':
alert('点击菜单');
EventUtil.preventDefault(event);
break;
case 'editor_pick_lnk':
alert('推荐区');
EventUtil.preventDefault(event);
break;
}
});2.移除事件处理程序
如果内存中保留大量无用的事件处理程序，会影响性能。所以一定要在不需要的时候及时移除事件处理程序。尤其注意以下情况：使用innerHTML删除带有事件处理程序的元素时，要先将事件处理程序设置为null。使用委托也可以解决这个问题，不直接将事件加载会被innerHTML替换的元素，而是将事件赋给其父元素，这样就可以避免了。卸载页面时，最好手工清除所有的事件处理程序。
六、DOM中的事件模拟
事件经常由用户操作或通过其他浏览器功能来触发，也可以使用JS在任意时刻来触发特定的事件，而此时的事件就如同浏览器创建的一样。在测试Web应用程序，模拟触发事件是一种极其有用的技术。
1. DOM中的事件
模拟分三步：
使用document.createEvent()创建event对象。通过赋值不同的参数，可以模拟不同的事件类型
初始化event对象；
触发事件，调用dispatchEvent()方法，所有支持事件的DOM节点都可以支持这个方法。
function simulateClick() {
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, window,
0, 0, 0, 0, 0, false, false, false, false, 0, null);
var cb = document.getElementById("checkbox");
var canceled = !cb.dispatchEvent(evt);
if(canceled) {
// A handler called preventDefault
alert("canceled");
} else {
// None of the handlers called preventDefault
alert("not canceled");
}
}2. 模拟鼠标事件
首先createEvent()方法传入参数是“MouseEvent”来模拟鼠标事件。返回的event对象有一个initMouseEvent()方法，用来初始化事件信息。该方法有15个参数：
type(字符串)：要触发的事件类型，比如“click”。
bubbles(bool)：事件是否冒泡。一般设为true。
cancelable(bool)：事件是否可以取消。一般设为true。
view：与事件关联的视图，一般设置为document.defaultView。
detail(整数)：与事件有关的详细信息，一般设置为0.
screenX：事件相对于屏幕的X坐标。
screenY：事件相对于屏幕的Y坐标。
clientX：事件相对于视口的X坐标。
clientY：事件相对于视口的Y坐标。
ctrlKey(bool)：是否俺下了Ctrl键，默认为false。
altKey：是否按下了alt键，默认false。
shiftKey：是否按下了shift键，默认false。
metaKey：是否按下了meta键，默认false.
button(整数)：按下了哪个鼠标键，默认0。
relatedTarget：与事件相关的对象，一般为null.只在模拟mouseover和mouseout的时候会用到。
最后给DOM元素调用dispatchEvent()方法来触发事件。
var objmenu = document.getElementById('nav_menu');
objmenu.onclick = function () {
console.log('menu');
}
document.body.onclick = function () {
console.log('body');
}
var event = document.createEvent('MouseEvent');
event.initMouseEvent('click', true, true, document.defaultView, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
for (var i = 0; i < 5; i++) {
objmenu.dispatchEvent(event);
}3. 自定义DOM事件
DOM3中支持自定义DOM事件。要创建新的自定义事件，可以调用document.createEvent()方法，返回的对象有一个initCustomEvent()方法，包含四个参数：
type：触发事件的类型；
bubbles：事件是否冒泡；
cancelable：事件是否可以取消；
detail：任意值，保存在event.detail属性中。
最后在DOM元素调用dispatchEvent()方法触发事件。
var objmenu = document.getElementById('nav_menu');
EventUtil.addHandler(objmenu, 'myevent', function (event) {
console.log('menu' + event.detail);
});
EventUtil.addHandler(document.body, 'myevent', function (event) {
console.log('body' + event.detail);
})
if (document.implementation.hasFeature('CustomEvents', '3.0')) {
var event = document.createEvent('CustomEvent');
event.initCustomEvent('myevent', true, true, '测试事件detail');
for (var i = 0; i < 5; i++) {
objmenu.dispatchEvent(event);
}
}自定义事件的函数有 Event、CustomEvent 和 dispatchEvent。直接自定义事件，使用 Event 构造函数；CustomEvent 可以创建一个更高度自定义事件，还可以附带一些数据，具体用法如下：
var myEvent = new CustomEvent(eventname, options);其中 options 可以是：
{
detail: {
...
},
bubbles: true,
cancelable: false
}其中 detail 可以存放一些初始化的信息，可以在触发的时候调用。其他属性就是定义该事件是否具有冒泡等等功能。内置的事件会由浏览器根据某些操作进行触发，自定义的事件就需要人工触发。dispatchEvent 函数就是用来触发某个事件：
element.dispatchEvent(customEvent);上面代码表示，在 element 上面触发 customEvent 这个事件。结合起来用就是：
// add an appropriate event listener
obj.addEventListener("cat", function(e) { process(e.detail) });
// create and dispatch the event
var event = new CustomEvent("cat", {"detail":{"hazcheeseburger":true}});
obj.dispatchEvent(event);使用自定义事件需要注意兼容性问题，而使用 jQuery 就简单多了：
// 绑定自定义事件
$(element).on('myCustomEvent', function(){});
// 触发事件
$(element).trigger('myCustomEvent');此外，你还可以在触发自定义事件时传递更多参数信息：
$( "p" ).on( "myCustomEvent", function( event, myName ) {
$( this ).text( myName + ", hi there!" );
});
$( "button" ).click(function () {
$( "p" ).trigger( "myCustomEvent", [ "John" ] );
});