跨浏览器的事件处理程序
DOM0级处理事件
将一个函数赋值给一个事件处理程序属性
事件流： 冒泡阶段
使用：
1、为元素增加事件：
let btn = document.getElementById("myBtn");btn.onclick = function(){ alert(this.id);}复制代码 2、删除事件：
let btn = document.getElementById("myBtn");btn.onclick = null;复制代码 DOM2级事件处理程序
两个方法： addEventListener()和removeEventListener()
三个参数： 处理事件名，事件处理程序，布尔值。（最后的布尔值为true，表示在捕获阶段调用事件处理程序；为false，表示在冒泡调用事件处理程序）
使用：
1、为元素增加事件：
let btn = document.getElementById("myBtn");let handler = function(){ alert(this.id);}btn.addEventListener('click',handler,false);复制代码 2、删除事件：
btn.removeEventListener('click',handler,false);复制代码 注意：
1），addEventListener()添加的匿名函数将无法移除；
2），大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段（即第三个参数为false）；
3），如果添加了多个事件处理程序，会按照添加它们的顺序触发。
IE事件处理程序
两个方法： attachEvent(),detachEvent()
两个参数： 事件处理程序名称，事件处理程序函数
事件流： 冒泡阶段
使用：
1、为元素增加事件：
let btn = document.getElementById("myBtn");let handler = function(){ alert(this.id);}btn.attachEvent('onclick',handler)复制代码 2、删除事件：
btn.detachEvent('onclick',handler);复制代码 注意： 与DOM方法不同的是，这些事件处理程序不是以添加它们的顺序执行，而是以相反的顺序被触发。
跨浏览器的事件处理程序
为了以跨浏览器的方式处理事件，保证处理事件的代码能在大多数浏览器下一致运行，创建自己的对象，包含上面两个方法。
let EventUnit = { addHandle: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; } }};复制代码 用法：
let btn = document.getElementById('myBtn');let handler = function(){ alert(this.id);};EventUnit.addHandle(btn,'click',handler);EventUnit.removeHandler(btn,'click',handler);复制代码 事件对象
在触发DOM上的某个事件时，会产生一个事件对象，这个对象包含着所有与事件有关的信息。
DOM中的事件对象（DOM0级和DOM2级）
-
兼容DOM的浏览器会将一个event对象传入到事件处理程序。
let btn = document.getElementById("myBtn");btn.onclick = function(event){ alert(event.type);//'click'};btn.addEventListener('click',function(event){ alert(event.type);//'click'}.false);复制代码 -
event对象包含与创建它的特定事件有关的属性和方法
属性/方法 用法 bubbles(Boolean) 表明事件是否冒泡 cancelabel(Boolean) 表明是否可以取消事件的默认行为 currentTarget(Element) 其事件处理程序当前正在处理事件的那个元素 defaultPrevented(Boolean) 为true表示已经调用preventDefault() detail(Integer) 与事件相关的细节信息 eventPhase(Integer) 调用事件处理程序的阶段：1表示捕获阶段，2表示“处于目标”，3表示冒泡阶段 preventDefault()(Function) 取消事件的默认行为。如果cancelabel是true则可以使用这个方法 stopImmediatePropagation()(Function) 取消事件的进一步捕获或冒泡，同时阻止任何事件处理程序被调用 stopPropagation()(Function) 取消事件的进一步捕获或冒泡。如果bubbles为true，则可以使用这个方法 target(Element) 事件的目标 trusted(Boolean) 为true表示事件是浏览器生成，为false表示事件是由开发人员通过javascript创建的 type(String) 被触发的事件类型 view(AbstractView) 与事件关联的抽象视图。等同于发生事件的window对象 -
比较常用的属性和方法
1）、事件处理内部，对象this始终等于currentTarget的值，而target则只包含事件的实际目标。
2）、通过检测event.type属性，可以让函数确定发生了什么事件，并执行相应的操作。（如：click,mouseover,mouseout）
3）、阻止特定事件的默认行为，可以用preventDefault方法。但需要注意的是，只有cancelabel属性设置为true的事件，才可以使用preventDefault()来取消其默认行为。
4）、stopPropagation()方法用于立即停止事件在DOM层次中的传播，即取消进一步的事件捕获或冒泡。（如：直接添加到一个按钮的事件处理程序可以调用stopPargation(),从而避免触发注册在document.body上面的事件处理程序）
备注： 只有在事件处理程序执行期间，event对象才会存在；一旦事件处理程序执行完成，event对象就会被销毁。
IE中的事件对象
-
有以下两种情况：
第一种：在使用DOM0级方法添加事件处理程序时，event对象作为window对象的一个属性存在。
let btn = document.getElementById("myBtn");btn.onclick = function(){ let event = window.event; alert(event.type);//'click'};复制代码第二种：如果事件处理程序是使用attachEvent()添加的，那么就会有一个event对象作为参数被传入事件处理程序函数中。在使用attachEvent()的情况下，也可以通过window对象来访问event对象
let btn = document.getElementById('myBtn');btn.attachEvent("onclick",function(event){ alert(event.type);//"click});复制代码 -
IE的event对象同样也包含与创建它的事件相关的属性和方法
属性/方法 用法 canceBubble(Boolean) 默认为false，但将其设置为true就可以取消事件冒泡（与DOM中的stopPropagation()方法相同） returnValue(Boolean) 默认为true，但将其设置为false就可以取消事件的默认行为（与DOM中的preventDefault()方法相同） srcElement(Element) 事件的目标（与DOM中的traget属性相同） type(String) 被触发的事件的类型
跨浏览器的事件和对象的封装
把上面的EventUnit封装在js文件中，对该文件进行引用，就可以使用里面的方法进行浏览器的兼容
let EventUnit = { addHandle: 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; } }, 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; } }, stopPropagation: function(event) { if (event.stopPropagation) { event.stopPropagation(); } else { event.canceBubble = true; } }};复制代码 参考： 《Javascript高级程序设计》第3版的第13章：事件