DOM级别与DOM事件
DOM级别：DOM0级、DOM1级、DOM2级、DOM3级
DOM事件：DOM0级事件处理、DOM2级事件处理、DOM3级事件处理（1级DOM标准并没有定义事件相关的内容，所以没有所谓的1级DOM事件模型）
1、DOM0级之前事件
<button onclick="alert(99)">按钮</button>
2、DOM0级事件
添加事件处理程序：
element.onXXX = function(event){}
<button id="btn" >按钮</button>
var btn = document.getElementById('btn');
btn.onclick = function() {
alert('hell');
}
解除事件处理程序：
element.onXXX = false || null;
- this指向是dom元素本身
- 兼容性很好，但是一个元素的同一个事件上只能绑定一个处理程序
- 基本等同于写在HTML行间上，js和HTML的耦合太强
- 此种方法无法绑定多个事件处理函数
3、DOM2级事件
添加事件处理程序：
(1)、ele.addEventListtener(type,fn,false) IE9以下 不兼容，可以为一个事件绑定多个处理程序
<button id="btn" ></button>
var btn = document.getElementById('btn');
function foo() {
alert('Hello World');
}
* this指向是dom元素本身
(2)、ele.attachEvent('on'+type,fn); IE独有，一个事件同样可以绑定多个处理程序
btn.attachEvent('onclick', foo);
* this指向是window
解除事件处理程序(匿名函数无法解除)：
ele.removeEventListener(type,fn,false)
ele.detachEvent('on'+type,fn)
2、DOM3级事件
DOM3(增加了多种事件类型，比如鼠标事件，键盘事件）
封装通用添加事件函数
function addEvent(elem, type, handle) {
if (elem.addEventListener) {
elem.addEventListener(type, handle, false)
} else if (elem.attachEvent) {
elem.attachEvent('on' + type, function () {
handle.call(elem);
})
}else{
elem['on'+type] = handle;
}
}
事件处理模型 --事件冒泡、事件捕获（IE没有捕获事件）
事件冒泡：结构上（非视觉上）嵌套关系的元素会存在事件冒泡的功能，即同一事件，自子元素冒泡到父元素上
事件捕获：结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，即同一事件，自父元素捕获至子元素
触发顺序：先捕获，后冒泡
- focus,blur,change,submit,reset,select等事件不冒泡
取消冒泡
- w3c标准 event.stopPropagation();但不支持ie9一下版本
- IE独有 event.cancelBubble = true
阻止默认事件
- return false; 以对象属性的方式注册的事件才生效
- event.preventDefault(); w3c标准，IE9以下不兼容
- event.returnValue = false; 兼容IE
