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;
}
}
}