DOM事件

JavaScript与HTML之间的交互是通过事件实现的。JavaScript事件是由访问web页面的用户引起的一系列操作。

DOM事件类

分为DOM0，DOM2，DOM3；
DOM0： element.onclick = function(){ }
删除DOM0事件处理程序，只要将对应事件属性置为null即可

缺点：（1）、一个对象只能有一个事件处理程序，多了会覆盖
（2）、没有屏蔽相同的函数

DOM2：element.addEventListener('click',handle,false}
element.removeEventListener('click',handle,false)
其中，handler是事件处理程序，传入removeEventListener()中的事件处理函数，必须与传入addEventListener()中的相同，所以addEventListener()添加的匿名函数无法移除；
最后的布尔值：true表示捕获，false表示冒泡

优点：（1）、可以添加多个事件处理程序，不会覆盖； （2）、屏蔽相同的函数； （3）、可以设置冒泡和捕获；

DOM3：element.addEventListener('click',handle,false}
element.removeEventListener('click',handle,false)
比DOM2多增加了事件；

事件流

基本概念：
事件：用户或浏览器自身执行的某种动作，例如click、load、mousedown；
事件流：描述的是从页面中接收事件的顺序；
事件模型：分为捕获和冒泡，其中事件捕获是从外到里触发，直到捕获到事件目标(target)；事件冒泡是从事件目标(target)开始，从里到外触发；

“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。首先发生的是事件捕获，为截获事件提供了机会，然后是实际的目标接收到事件，最后一个阶段是事件冒泡阶段，可以在这个阶段对事件作出响应。

描述事件捕获的具体流程

事件捕获的用意在于在事件到达预定目标之前捕获它。

element.addEventListener('click',handle,true};//最后的布尔值设为true

IE事件处理程序

IE实现与DOM类似的两种方法：attachEvent()和detachEvent()，接受两个参数，事件处理程序名称和事件处理程序函数，IE只支持冒泡

element.attachEvent("onclick",function(){});//添加
element.detachEvent("onclick",function(){});//移除

特点：（1）、IE添加事件无法屏蔽重复的函数；
（2）、IE的this指向window而不是element；
（3）、DOM0事件上，IE无法接收Event对象，但使用attachEvent()却可以。

Event对象的常见应用

1、event.preventDefault()
阻止默认行为，例如阻止a标签的跳转
2、event.stopPropagation()
阻止冒泡
3、event.stopImmediatePropagation()
事件响应优先级，一个事件执行一个事件处理程序之后，阻止剩下的事件处理程序执行，并防止当前事件在DOM树上冒泡。
4、event.currentTarget
当前正在处理事件的那个元素，当前所绑定事件的元素
5、event.target
事件的目标节点

currentTarget和target的区别
event.currentTarget指向事件所绑定的元素，而event.target始终指向事件发生时的元素

自定义事件

自定义事件由DOM3提出

var eve = new Event('test');
ev.addEventListener('test', function () {
    　　console.log('test dispatch');
});
setTimeout(function () {
    　　ev.dispatchEvent(eve); //事件对象
}, 1000)

还有CustomEvent，
两者区别：CustomEvent可以指定事件名，后面还可以跟一个object作为指定参数。