1.DOM0级事件处理程序
1.1绑定事件，采用onclick的方式，例如下，其事件处理程序里的this则指向当前点击对象。
var btn = document.getElementById('testBtn')
btn.onclick = function(){
console.log(this.id)
}
1.2移除事件
btn.onclick = null
2.DOM2级事件处理程序
2.1、DOM2级事件 规定了 事件流包括三个阶段： 事件的捕获，处于当前目标，事件的冒泡
即以document -> html -> body -> 对象的父容器 ··· -> 对象 -> ··· 对象的父容器 -> body -> html -> document
2.2、"DOM2级事件"定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。接受三个参数： 事件名，事件处理程序的函数， 布尔值。第三个参数布尔值如果是true，表示的是在捕获事件阶段调用事件处理程序，如果是false，则表示在冒泡阶段调用事件处理程序。
var btn = document.getElementById('testBtn')
var clickHandle = function(){
console.log(this.id)
}
btn.addEventListener('click', clickHandle, false) //false表示冒泡阶段调用事件处理程序
btn.removeEventListener('click', clickHandle, false)
同时对于IE 有定义不一样的API 与之相对应 即是 attachEvent() 和 detachEvent()
var btn = document.getElementById('testBtn')
var clickHandle = function(){
console.log(this.id)
}
btn.attachEvent('onclick', clickHandle) //在这里IE与其他的不一样的地方 就是 要加on
btn.detachEvent('onclick', clickHandle)
3.结合这两部分的内容进行组装跨浏览器的事件处理程序
var EventHandle = {
addHandle: function(element, type, handle){
if(element.addEventListener){
element.addEventListener(type, handle, false)
}else if(element.attachEvent){
element.attachEvent('on' + type, handle)
}else{
element['on' + type] = handle
}
},
removeHandle: function(element, type, handle){
if(element.removeEventListener){
element.removeEventListener(type, handle, false)
}else if(element.detachEvent){
element.detachEvent('on' + type, handle)
}else{
element['on' + type] = null
}
}
}
4.DOM3级事件
4.1.DOM浏览器中可能发生的事件有很多种，不同事件类型具有不同的信息，DOM3级事件规定了一下几种事件：
1）UI事件，当用户与页面上的元素交互时触发；
2）焦点事件，当元素获得或者失去焦点时触发；
3）鼠标事件，当用户通过鼠标在页面上执行操作时触发；
4）滚轮事件，当使用鼠标滚轮（或类似设备）时触发；
5）文本事件，当在文档中，输入文本时触发；
6）键盘事件，当用户通过键盘在页面上执行操作时触发；
7）合成事件，当为IME（Input Method Editor，输入法编辑器）输入字符时触发；
8）变动事件，当底层Dom结构发生变化时触发；
4.2.DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件，也添加了一些新事件。包括IE9在内的主流浏览器都支持DOM2级事件，IE9也支持DOM3级事件。
4.3.DOM中的事件模拟（自定义事件）：
DOM3级还定义了自定义事件，自定义事件不是由DOM原生触发的，它的目的是让开发人员创建自己的事件。要创建的自定义事件可以由createEvent("CustomEvent");
返回的对象有一个initCustomEvent（）方法接收如下四个参数。
1）type：字符串，触发的事件类型，自定义。例如 “keyDown”，“selectedChange”;
2）bubble（布尔值）：标示事件是否应该冒泡；
3）cancelable(布尔值)：标示事件是否可以取消；
4）detail（对象）：任意值，保存在event对象的detail属性中；
