DOM事件学习笔记

本文是我在慕课上学习DOM时所做的笔记，不足之处，欢迎指正。
视频链接：DOM事件揭秘
主要内容：
1、事件流
2、使用事件处理程序
3、不同的事件类型

事件流

描述的是从页面中接受事件的顺序
事件冒泡流（IE）：即事件最开始由最具体的元素（文档中嵌套层次最深的节点）接收，然后逐级向上传播至最不具体的节点（文档）。
事件捕获流：不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件。

事件处理程序

1）HTML事件处理程序

onclick = "alert('hello')"
onclick = "functionname()"
//缺点：HTML代码和JS代码耦合度高

2）DOM0级事件处理程序
把一个函数赋值给一个事件的处理程序属性

var btn = document.getElementById("id");    //取得节点对象
btn.onclick = functionname();
btn.onclick = null; //删除事件

3）DOM2级事件处理程序
用于处理指定和删除事件处理程序的操作：addEventListener()、removeEventListener()
接收三个参数：要处理的事件名、作为事件处理程序的函数、布尔值
布尔值：false为事件冒泡阶段处理程序 true为事件捕获阶段处理程序

var btn = document.getElementById("id");    //取得节点对象
btn.addEventListener( ' click ' , functionname() , false );
btn.removeEventListener( ' click ' , functionname() , false );

4）IE事件处理程序

attachEvent()   添加事件
detachEvent(）       删除事件

接收参数：事件处理程序的名称、事件处理程序的函数

var btn = document.getElementById("id");    //取得节点对象
btn.attachEvent( ' onclick ' , functionname() );
btn.detachEvent( ' onclick ' , functionname() );

5）跨浏览器的事件处理程序（能力检测）

var btn = document.getElementById("id");    //取得节点对象
var eventUtil = {
    //添加句柄
    addHandler : function(element , type ,handler){
        if( element.addEventListener){  //DOM2级
            element.addEventListener(type,handler,false);
        } else if( element.attachEvent){    //IE
            element.attachEvent('on'+type , handler);
        }else{  //DOM0级
            element[ 'on'+type] = handler;
        }
    }
    //删除句柄
    removeHandler : function(element , type ,handler){
        if( element.removeEventListener){   //DOM2级
            element.removeEventListener(type,handler,false);
        } else if( element.detachEvent){    //IE
            element.detachEvent('on'+type , handler);
        }else{  //DOM0级
            element[ 'on'+type] = null;
        }
    }
}