事件是一种异步编程的实现方式，本质上是程序各个组成部分之间的通信，DOM支持大量的事件；
本文通过这几点向大家详细解析事件处理的基本原理：事件类型、事件目标、事件处理程序、事件对象、事件传播
最后再向大家介绍Event对象；
（原创文章，转摘请注明：苏福：http://www.cnblogs.com/susufufu/p/5768431.html）
一、事件类型(event type)：是一个用来说明发生了什么类型事件的全小写的字符串，如‘mouseover’
传统事件类型：表单事件，Window事件，鼠标事件，键盘事件，DOM事件， HTML5事件，触摸屏和移动设备事件等，这里是所有事件的详细介绍：
DOM事件类型详解二、事件目标(event target)：触发事件的对象
三、事件处理程序(或事件监听程序)(event listener)：处理或响应事件的函数。当某对象触发某事件时，浏览器将自动调用在该对象上注册的函数；
注册事件处理程序（监听事件）：
1.作为HTML属性注册(只会在冒泡阶段触发)如<table id="t" onclick="modifyText();">；而某些事件类型通常直接在浏览器上触发，而非任何特定文档元素上触发，把这些事件处理程序放在<body>标签上，但浏览器会在Window对象上注册它们，如<body onload="alert('Hello world!')">，这些事件有：
onafterprint onfocus ononline onresize onbeforeprint onhashchange
onpagehide onstorage onbeforeunload onload onpageshow onundo
onblur onmessage onpopstate onunload onerror onoffline onredo
作为HTML属性的事件的值是JS代码字符串，是处理函数的主体，不含{}，注意：尽量不要在任何其他HTML标签上注册事件，它违反了HTML与JavaScript代码相分离的原则，倘若事件函数可能还没加载进来就点击了事件对象元素，这会导致错误；
2.作为DOM元素的属性来注册(只会在冒泡阶段触发)，此时的事件处理程序属性的名字需加‘on’前缀，这种方式兼容所有浏览器，唯一的缺点是只能注册一个事件处理函数，如果定义两次onclick属性，后一次定义会覆盖前一次；如：window.onload = function(){...};
3.除了IE8及之前版本外的所有浏览器中，DOM的事件操作（监听和触发），都定义在EventTarget接口。Element节点、document节点和window对象，都部署了这个接口。此外，XMLHttpRequest、AudioNode、AudioContext等浏览器内置对象，也部署了这个接口。该接口有三个方法，addEventListener和removeEventListener用于绑定和移除监听函数，dispatchEvent用于触发事件；
addEventListener(type,listener,boolean)方法来注册listener，第三个参数设置事件的传播方式，通常使用默认值false，表示监听函数只在冒泡阶段(pupple)被触发，当设为true时，表示监听函数在捕获阶段(capture)触发；可以为同一对象上的同一类型事件注册任意多个listener，所有listener会按照注册顺序触发(注册重复的listener将会被浏览器忽略)；
如果希望向监听函数传递参数，可以用匿名函数包装一下监听函数，如elm.addEventListener('click',function(){listen('实参')},false)；
当注册的listener是一个对函数的引用变量，就可以用removeEventLestener(type,listener,boolean)在事件目标上删除该listener，对同一监听事件的冒泡事件和捕获事件需要分别删除，两者互不干扰；
var div = document.getElementById('div');
var listener = function (event) {
/* do something here */
};
div.addEventListener('click', listener, false);
div.removeEventListener('click', listener, false);
dispatchEvent(event)方法在当前节点上手动触发指定事件，从而触发监听函数的执行。该方法返回一个布尔值，只要有一个监听函数调用了Event.preventDefault()，就返回false，否则为true，参数是一个Event对象的实例，该参数不能为空，且必须是一个有效的事件对象，否则报错；
btn.addEventListener('click', listener, false);
var e = new Event('click');
btn.dispatchEvent(e); //在btn上立即触发click事件，将立即调用listener
下面例子根据dispatchEvent方法的返回值，判断事件是否被取消了
var canceled = !btn.dispatchEvent(event);
if (canceled) { console.log('事件取消'); }
else { console.log('事件未取消'); }}
4.IE8及之前版本仅支持attachEvent (type,listener)和detachEvent(type,listener)，它们的用法和addEventListener的区别：a.参数只有两个；b.参数type必须加'on'前缀；c.它允许对同一监听事件进行重复注册，且都会被调用；d.使用attachEvent方法有个缺点，是this的值会变成 window 对象而不是触发事件的元素；
调用顺序问题：1.通过设置对象属性或HTML属性注册的处理程序一直优先调用；
2.使用addEventListener 注册的处理程序按照它们的注册顺序调用；
3.旧版IE中使用attachEvent注册的处理程序可能按照任何顺序调用。
返回值问题：1.事件处理程序的返回值只对通过属性注册的处理程序才有意义，通过设置对象属性或HTML属性注册 事件处理程序的返回值为false，就是告诉浏览器不要执行这个事件相关的默认操作。当浏览器要跳转到新页面时触发Window对象的onbeforeunload事件，若它的的返回值为字符串，则它将出现在询问确认对话框中；
2.addEventListener()或attachEvent()注册事件处理程序若要取消浏览器的默认操作必须调用preventDefault()方法或设置事件对象的returnValue属性。
this指向问题：1.addEventListener方法指定的监听函数，内部的this对象总是指向触发事件的那个节点；
2.IE8及以前的attachEvent方法注册的事件处理函数的this指向全局对象；
以下写法的this对象都指向Element节点。
element.onclick = print;
element.addEventListener('click', print, false)
element.onclick = function () {console.log(this.id);}
<element onclick="console.log(this.id)">
以下写法的this对象，都指向全局对象。
element.onclick = function (){ doSomething() };
element.setAttribute('onclick', 'doSomething()');
<element onclick="doSomething()">
element.attachEvent('onclick',doSomething) //IE8
内存问题：对如下代码，每个循环中都会创建一个新的匿名函数，占用的内存越来越多；由于没有保持到匿名函数的引用，它不可能被调用 removeEventListener；所以应当把第二参数listener保持为对处理事件函数的引用；
for(i=0 ; i<els.length ; i++){
els[i].addEventListener("click", function(e){/*do something*/}, false});
}
通用的兼容旧版IE的工具函数：
确保事件处理程序的this指向事件的目标对象的工具函数addEvent
function addEvent(target,type,func){
if(target.addEventListener){
target.addEventListener(type,func,false);
}else{
target.attachEvent('on'+type,function(e){ //这里attachEvent注册的处理函数未绑定引用，所以无法用detachEvent删除
return func.call(target,e);
});
}
}
//通用的事件处理程序(因为IE8及以前版本,作为事件目标的on-属性的处理程序需要window.event来获得事件对象，且触发事件的目标节点对象通过event.srcElement属性获得)
function func(event){
var event = event||window.event;
var target = event.target || event.srcElement;
//......处理程序代码
}
四、事件传播(event propagation)：是浏览器决定哪个对象触发其事件处理程序的过程。
“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段==>处于目标阶段==>事件冒泡阶段。首先发生的是事件捕获阶段(从外层向内层传播)，为事件传播经过的所有节点截获事件提供了机会。然后是实际的目标接收事件(按注册顺序执行)。最后一个阶段是冒泡阶段(从内层向外层冒泡)。
当容器元素及嵌套元素，即在捕获阶段又在冒泡阶段调用事件处理程序时：事件按DOM事件流的顺序执行事件处理程序，且当事件处于目标阶段时，事件调用顺序决定于绑定事件的书写顺序
如果希望事件到某个节点为止，不再传播，有两种方式：1.使用事件对象的event.stopPropagation()方法来阻止当前监听函数的传播；2.使用事件对象的event.stopImmediatePropagation()方法来阻止当前事件在其事件对象上的所有监听函数的传播；
事件的代理（delegation）：由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件；
五、事件对象(Event)：事件发生以后，会生成一个事件对象，作为参数传给监听函数。浏览器原生提供一个Event对象，所有的事件都是这个对象的实例，或者说继承了Event.prototype对象。Event对象本身就是一个构造函数，可以用来生成新的实例。
var ev = new Event("look", {"bubbles":true, "cancelable":false});
document.dispatchEvent(ev);
Event构造函数接受两个参数。第一个参数是字符串，表示事件的名称；第二个参数是一个对象，表示事件对象的配置。该参数可以有以下两个属性。
bubbles：布尔值，可选，默认为false，表示事件对象是否冒泡。
cancelable：布尔值，可选，默认为false，表示事件是否可以被取消。
Event对象的属性：
1.与事件的阶段有关：
bubbles： 只读属性，返回一个布尔值，表示当前事件是否会冒泡，可根据事件是否会冒泡来调用不同的函数。
eventPhase：返回一个整数值(0,1,2,3之一)，表示事件目前所处的状态
0，事件目前没有发生。
1，事件目前处于捕获阶段，即处于从祖先节点向目标节点的传播过程中。该过程是从Window对象到Document节点，再到HTMLHtmlElement节点，直到目标节点的父节点为止。
2，事件到达目标节点，即target属性指向的那个节点。
3，事件处于冒泡阶段，即处于从目标节点向祖先节点的反向传播过程中。该过程是从父节点一直到Window对象。只有bubbles属性为true时，这个阶段才可能发生
2.与事件的默认行为有关：
cancelable：返回一个布尔值，表示事件是否可以取消。如果要取消某个事件，需要在这个事件上面调用preventDefault方法
defaultPrevented：返回一个布尔值，表示该事件是否调用过preventDefault方法。
3.与事件的目标节点有关：
currentTarget：返回事件执行的监听函数所绑定的那个节点。
target：返回触发事件的那个节点。在IE6—IE8之中，该属性的名字不是target，而是srcElement
4.与事件对象的其他信息相关：
type：返回一个字符串，表示事件类型
detail：返回一个数值，表示事件的某种信息。具体含义与事件类型有关，对于鼠标事件，表示鼠标按键在某个位置按下的次数，比如对于dblclick事件，detail属性的值总是2
timeStamp：返回一个毫秒时间戳，表示事件发生的时间。从PerformanceTiming.navigationStart开始计算，即表示距离用户导航至该网页的时间。如果想将这个值转为Unix纪元时间戳，就要计算event.timeStamp + performance.timing.navigationStart
isTrusted：返回一个布尔值，表示该事件是否可以信任。用处不大，不同浏览器的支持不一样。
Event对象的方法：
preventDefault()：取消浏览器对当前事件的默认行为，该方法生效的前提是，事件的cancelable属性为true，如果为false，则调用该方法没有任何效果。
stopPropagation()：终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。注意：该方法不能阻止同一个 Document 节点上的其他事件句柄被调用，但是它可以阻止把事件分派到其他节点
stopImmediatePropagation()：阻止同一个事件的其他监听函数被调用，只要其中有一个监听函数调用了该方法，其他的监听函数就不会再执行了。
参考链接：
JavaScript权威指南第六版
- [转]理解JavaScript中的事件处理
什么是事件? 事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的胶水.当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了.事件可能是用户在某些内容上的点击 ...
- 理解JavaScript中的事件处理
什么是事件? 事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的胶水.当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了.事件可能是用户在某些内容上的点击 ...
- 理解JavaScript中的事件处理 阻止冒泡event.stopPropagation();
原文地址:http://www.cnblogs.com/binyong/articles/1750263.html 这篇文章对于了解Javascript的事件处理机制非常好,将它全文转载于此,以备不时 ...
- 详解JavaScript中的事件处理
在漫长的演变史,我们已经告别了内嵌式的事件处理方式(直接将事件处理器放在HTML元素之内来使用),今天的事件,它已是DOM的重要组成部分,遗憾的是,IE继续保留它最早在IE4.0中实现的事件模型,以后 ...
- DOM中的事件对象
三.事件对象事件对象event1.DOM中的事件对象(1).type:获取事件类型(2).target:事件目标(3).stopPropagation() 阻止事件冒泡(4).preventDefau ...
- 第38课 Qt中的事件处理（上）
1. GUI程序原理回顾 (1)图形界面应用程序的消息处理模型 (2)思考:操作系统发送的消息如何转变为Qt信号 2. Qt中的事件处理 (1)Qt平台将系统产生的消息转换为Qt事件 ①Qt事件是一个 ...
- JQuery总结：选择器归纳、DOM遍历和事件处理、DOM完全操作和动画 （转）
JQuery总结:选择器归纳.DOM遍历和事件处理.DOM完全操作和动画 转至元数据结尾 我们后台可能用到的页面一般都是用jquery取值赋值的,发现一片不错的文章 目录 JQuery总结一:选择器归 ...
- js中关于事件处理函数名后面是否带括号的问题
今天总结一个关于事件处理程序的小细节.首先回顾一下事件处理的一些概念. JS中的事件处理(事件绑定)就是让某种或某些事件触发某些活动.有两种常见的形式,分别是DOM Level 0 和DOM Leve ...
- JQ中的clone()方法与DOM中的cloneNode()方法
JQ中的clone()方法与DOM中的cloneNode()方法 cloneNode()定义和用法 cloneNode()方法创建节点的拷贝,并返回该副本. 语法: node.cloneNode(de ...
随机推荐
- 将数据转化成字符串时：用字符串的链接 还是 StringBuilder
/* 目的:将数据转化成字符串时:用字符串的链接 还是 StringBuilder呢? */ public class Test{ public static void main(String[] a ...
- java接口中多继承的问题
java中支撑多继承吗? 支持->接口啊 为什么接口支持多继承呢?因为接口中没有方法体!即使可能两个接口中有一样的抽象方法,但是 只会调用子类中覆盖该同样抽象方法的具体方法!不会引起调用的歧义! ...
- ASProtect注册码使用教程|ASProtect SKE(加壳脱壳工具) 2.56 汉化注册版
ASProtect 是功能非常完善的加壳.加密保护工具.能够在对软件加壳的同时进行各种保护.如:反调试跟踪.自校验及用密钥加密保护等:还有多种限制使用措施,如:使用天数限制.次数限制及对应的注册提醒信 ...
- JavaWeb:Web与HTTP协议简介
JavaWeb:Web与HTTP协议简介 Web的概念 什么是Web: Web是网络上使用最广泛的分布式应用架构. 旨在共享分布在网络上的各个Web服务器中的所有互相连接的信息. 三个特征: 用HTM ...
- ASP.NET MVC路由解析
继续往下看<ASP.NET MVC5框架揭秘>. ASP.NET系统通过注册路由和现有的物理文件路径发生映射.而对于ASP.NET MVC来说,请求的是某个Controller中的具体的A ...
- javascript学习5
JavaScript Array(数组)对象 数组对象的作用是:使用单独的变量名来存储一系列的值. 实例 创建数组 创建数组,为其赋值,然后输出这些值. For...In 声明 使用 for...in ...
- ssl证书生成：cer&jks文件生成摘录
一.生成.jks文件 1.keystore的生成: 分阶段生成: keytool -genkey -alias yushan(别名) -keypass yushan(别名密码) -keyalg ...
- 多iframe使用tab标签方式添加、删除、切换的处理实例
紧接着上一篇随笔iframe的内容增高或缩减时设置其iframe的高度的处理方案 如果采用iframe来切换显示内容的方式来展现办公Web.那么需要解决几个问题 1.tab标签需要和显示的iframe ...
- [AngularJS] AngularJS系列(1) 基础篇
目录 什么是AngularJS? 为什么使用/ng特性 Hello World 内置指令 内置过滤器 模块化开发 一年前开始使用AngularJS(以后简称ng),如今ng已经出2了.虽说2已完全变样 ...
- SQL--局部变量
取值的话:print @变量名, 变量不设置值的话,默认打印出来是:NULL, 输出变量的值:
