事件基本概念
事件类型：用来说明发生什么类型事件的字符串，即事件名。
事件目标：发生事件的对象。当谈论事件时，会同时指明类型和目标。
事件处理程序：处理或响应事件的函数，即事件监听程序。
事件对象：与特定事件相关并且包含有关该事件详细信息的对象。事件对象作为参数传递给事件处理程序（IE8之前的浏览器通过Event获取事件对象）。
事件传播：事件发生时，事件会由window发出，不断经过下一级节点直到目标节点，到达目标节点后，事件会按原路线返回window，事件从目标节点返回window的过程就是事件传播，又称冒泡阶段。在事件传播阶段可以通过事件对象阻止事件传播。
事件捕获： 事件发生时，事件会由window发出，不断经过下一级节点直到目标节点，这一过程就是事件捕获，又称捕获阶段。在事件捕获阶段可以通过事件对象阻止事件捕获。IE8之前的浏览器不支持事件捕获。
常见事件类型
1.Window事件
发生在浏览器窗口上的事件，部分事件的事件类型会与文档中的某些事件类型同名，包括文档以及外部资源完全加载时触发的load事件；浏览器窗口文档跳转到新文档时触发unload事件，该事件触发时不影响文档跳转；在文档跳转之前如果需要征得用户同意，可以使用beforeunload事件；浏览器窗口加载文档过程中出错时触发error事件；浏览器窗口尺寸改变时触发resize事件，滚动条滚动时触发scroll事件；浏览器窗口获取焦点或者失去焦点时，分别触发focus事件，blur事件；
2.DOM事件
主要有表单事件，鼠标事件，键盘事件，文本事件，文档加载事件。
表单事件包括提交表单时触发submit事件；重置表单时触发reset事件；表单元素内容修改时触发change事件；得到焦点，失去焦点时触发focus事件，blur事件；表单元素的点击时触发click事件等；
鼠标事件包括点击鼠标时触发click事件；移动鼠标时触发mousemove事件；按下，释放鼠标按键时触发mousedown事件，mouseup事件；点击右键时触发contextmenu事件，可以用来修改上下文菜单；连续点击两次鼠标按键时触发dblclick事件；鼠标滑到元素上，离开元素时触发mouseover事件，mouseup事件，IE中对应mouseenter事件，mouseleave事件；
键盘事件包括按下，释放按键时触发的keydown事件，keyup事件；keydown事件与keyup事件之前会触发keypress事件；
文本事件，使用webkit内核的浏览器支持textInput事件，该事件在产生可打印字符时触发；
3.HTML5事件
主要是指HTML5标准化的事件以及新增的事件。
事件传播
一个事件发生时，是事件先从文档根节点流向事件目标，然后在事件目标上触发事件，然后再回溯到文档根节点，即事件传播有三个阶段，从文档根节点流向事件目标是捕获阶段，到达事件目标是目标阶段，然后从事件目标到文档根节点是冒泡阶段（IE8之前的浏览器不支持捕获阶段，所以其事件传播，只有冒泡阶段）。完整流程如下图。
事件流.png
这里有一个Demo形象的模拟了事件传播过程。
事件代理
浏览器都支持冒泡阶段，我们可以利用浏览器的冒泡机制，通过监听父级节点来实现监听子节点的功能，这就是事件代理的概念。
使用事件代理的好处：
1.减少事件绑定次数，提高页面性能；
2.可以监听动态变化的DOM结构，前提是父级节点不是动态变化的，子节点可以动态变化。
原理是在父级节点绑定相应事件处理程序，当对应事件在子节点触发时通过冒泡阶段把事件传递到父节点，在父节点触发事件处理程序，再根据事件对象的target属性可以获取到是哪个事件目标，然后就可以根据不同的事件目标，来实现不同的业务逻辑。
事件监听（绑定，注册）
主要有以下方式来注册事件处理程序：
1.通过设置事件目标的事件属性，这些事件属性主要是由“on+事件名”组成。
例如：
document.getElementByTagName("a").onclick = function(){console.log("This is a click event");};
通过这种方式注册事件处理程序，同一个事件目标一次只能注册一个事件处理程序。
2.通过设置标签属性注册事件处理程序。
例如：
<a onclick="console.log('This is a click event')"></a>
通过这种方式只需要把函数体赋值给事件属性即可，同样的这种方式一次也只能注册一个事件处理程序。
3.支持标准事件模型的浏览器（IE8以及IE8之前的浏览器除外）中，事件目标对象中都有一个addEventListener()方法，可以使用这个方法给事件目标注册事件处理程序。使用这个方法一次可以给事件目标注册多个不同的事件处理程序，使用不同的事件处理程序参数多次调用即可，触发时根据注册顺序先后执行事件处理程序。相同的事件处理程序参数多次调用这个方法注册，也只能注册一次。
这个方法的完整定义：
element.addEventListener(event, function, useCapture)
event 必传参数 指定事件名
function 必传参数 事件处理程序
userCapture 可选参数 默认为false,指定事件处理程序在冒泡阶段执行；ture,指定事件处理程序在捕获阶段执行
4.不支持标准事件模型的浏览器（IE8以及IE8之前的浏览器）中，事件目标可以使用attachEvent()方法来注册事件处理程序。相同的事件处理程序使用这个方法可以被注册多次。
这个方法的完整定义：
element.attachEvent(event, function, useCapture)
event 必传参数 指定 "on"+事件名
function 必传参数 事件处理程序
由于IE8以及IE8之前浏览器不支持事件捕获，所以这个方法只有两个参数。
注意：IE9,IE10即支持
addEventListener()方法又支持attachEvent()方法来注册事件处理程序，但是IE8，IE7，IE6，IE5浏览器只支持attachEvent()方法注册事件处理程序。
事件调用顺序
1.通过方式1,2注册的事件处理程序优先执行。
2.通过方式3注册的事件处理程序按照注册顺序执行。
3.通过方式4注册的事件处理程序执行顺序不定，(测试发现IE9,IE10按照注册顺序正序执行，IE8按照注册顺序倒序执行)。
事件解绑，注销
通过方式1,2注册的事件无法解绑。
通过方式3注册的事件处理程序可以通过 removeEventListener()方法解绑， removeEventListener()方法有三个参数，第一个参数与addEventListener()方法一样，需要传事件名；第二个参数需要传 用addEventListener()方法注册的事件处理程序函数名，即想要解绑addEventListener()方法注册的事件处理程序，那么在注册时必须用事先声明好的函数，不能用匿名函数注册；第三个参数与addEventListener()方法的第三个参数一样。
通过方式4注册的事件处理程序可以通过detachEvent()方法解绑，detachEvent()方法参数与attachEvent()方法参数一样，使用时和 removeEventListener()方法类似。
事件取消
1.取消发生该事件时浏览器的默认操作
通过方式1,2注册的事件处理程序，可以直接返回false来告诉浏览器不要执行事件相关的默认操作。
通过方式3注册的事件处理程序，可以直接调用事件对象的preventDefault()方法来告诉浏览器不要执行事件相关的默认操作。
通过方式4注册的事件处理程序，可以通过设置事件对象的returnValue属性为false来告诉浏览器不要执行事件相关的默认操作。
2.取消事件传播
通过方式1,2注册的事件处理程序，不能取消事件传播
通过方式3注册的事件处理程序，可以直接调用事件对象的stopPropagation()方法来阻止事件传播。
通过方式4注册的事件处理程序，可以直接设置事件对象的cancelBubble属性为true来阻止事件传播。
自定义事件
对于支持标准事件模型的浏览器可以通过以下方式实现自定义事件
初始化事件类型
var event = new Event('myEvent');
或者
var event = document.createEvent('Event');
event.initEvent('myEvent',true,true);
绑定事件
element.addEventListener('myEvent',function(){});
解绑事件
element.removeEventListener('myEvent',funcName);
触发事件
element.dispatchEvent(event);
针对支持标准事件模型的浏览器处理事件时大体流程相似，主要的区别有两点，自定义事件需要初始化事件类型，以及使用dispatchEvent方法触发事件
IE浏览器注册自定义事件可以通过IE浏览器的私有的事件属性propertychange实现，具体参考漫谈js自定义事件、DOM/伪DOM自定义事件
如果引用了jquery，使用自定义事件就比较简单了
绑定事件
element.on("myEvent",function(){});
解绑事件
element.off("myEvent");
触发事件
element.trigger("myEvent");
自定义事件与内置事件的区别关注点不一样，自定义事件关注的是执行事件的标签，触发时机由程序控制；而内置事件关注的是触发事件的标签，触发时机由浏览器控制。自定义事件详细可以参考 Introducing custom events
资料来源
1.js权威指南
2.http://blog.jobbole.com/52430/
3.http://www.admin10000.com/document/6089.html
4.http://learn.jquery.com/events/introduction-to-custom-events/
网友评论