事件流

事件流描述的是从页面中接收事件的顺序。大家都知道，IE这家伙就是搞特殊，于是出现了两个版本，（不可忽视IE所带来的积极的作用，哈哈）

• IE的事件冒泡流
• Netscape的事件捕获流 实际上，这两个就是我后来晓得的DOM事件流，在DOM2级事件中，规定了事件流包括了的三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段。（虽然DOM2中规定了事件从document开始，但大多数浏览器都是从window对象开始捕获的，还有也规定也要求捕获阶段不会涉及事件目标，但大多数浏览器也都在捕获阶段触发了对象上的事件，结果就是说，有两个机会在目标对象上面操作事件）-参考JS高级编程
  --图片来自网络

事件处理程序

• HTML的事件处理程序，就是将js写在HTML中
• DOM0级的事件处理程序 element.click = function(){}
• DOM2级的事件处理程序 element.addEventListTener('click',function(){},false) 最后一个布尔参数代表是否在捕获阶段调用事件处理函数，一般为false,就是在冒泡阶段调用这个事件处理函数IEelement.attachEvent('onclick',function(){}) （DOM2级的好处就是可以添加多个事件处理函数，但是如果想要调用removeEventListener来移除之前添加的事件，则需要将函数以函数变量的形式提取出来，只将函数名作为参数传入）

someFun = function(){}element.addEventListener('click',someFun,false)element.removeEventListener('click',someFun,false)复制代码

• DOM3级就是新添了很多时间，例如Keyup等

event事件对象

上面所说的事件的处理函数中，会有一个默认的event对象

element.click = function(event){    event.preventDefault() 取消事件的默认行为    event.stopPropagation() 取消事件的进一步的捕获或者冒泡    event.stopImmediatePropagation() 取消事件的进一步的捕获或者冒，同事阻止任务事件处理程序被调用，（就是加入这个元素绑定了两个处理函数，使用这个会阻止另一个触发）    event.currentTarget 事件绑定的那个元素上    event.target 当前点击的元素，它和上面那个大哥常用于事件委托优化} 复制代码

自定义事件

var eve = new Event('test')element.addEventListener('test',function(){})触发element.dispatcher(eve)复制代码

有的时候面试会问Event和CustomEvent的区别，就是后者可以携带参数

// create and dispatch the eventvar event = new CustomEvent("cat", {  detail: {    hazcheeseburger: true  }});// add an appropriate event listenerobj.addEventListener("cat", function(e) {});obj.dispatchEvent(event);复制代码