DOM事件

DOM级别与DOM事件

DOM级别：DOM0级、DOM1级、DOM2级、DOM3级
DOM事件：DOM0级事件处理、DOM2级事件处理、DOM3级事件处理（1级DOM标准并没有定义事件相关的内容，所以没有所谓的1级DOM事件模型）

1、DOM0级之前事件

按钮

2、DOM0级事件

添加事件处理程序：
element.onXXX = function(event){}
按钮
    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以下 不兼容，可以为一个事件绑定多个处理程序
 
    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