javascript中的事件一

1. 事件冒泡

IE的事件流叫做事件冒泡，事件开始由最具体的元素接收，然后逐级向上传播到较为不具体的节点。

点击页面中的div元素，click事件会按如下顺序传播：
div
body
html
document

2.事件捕获

不太具体的节点应该更早的接收到事件，而最具体的节点应该最后接收到事件，其目的在于事件到达预定目标之前捕获它。
则上面例子的事件捕获顺序变为如下所示：
document
html
body
div

3.DOM事件流

DOM2级事件规定事件流有三个阶段：
a 事件捕获阶段，为截获事件提供机会
b 处于目标阶段，实际目标收到事件
c 事件冒泡阶段，这个阶段对事件作出响应

捕获阶段：事件从document到body后就停止了
处于目标阶段：事件在div上发生，并被看成冒泡的一部分

4.事件处理程序

事件：用户或者浏览器自身执行的某种动作
事件处理程序（或事件侦听器）：响应某个事件的函数
为事件指定处理程序的方式：HTML事件处理程序，DOM0级事件处理程序,DOM2级事件处理程序

• HTML事件处理程序

<input type="button" value="Click Me" onclick="alert(event.type)">

HTML事件处理程序的特殊点：
a 会创建一个封装着元素属性值的函数，该函数中有一个局部变量event，即事件对象
b 在a创建的函数中，this等于事件的目标元素
c a创建的函数扩展作用域的方式

• HTML事件处理程序的缺点：

a. 时差问题。js代码在页面底部，还没有被加载，就点击了html元素，则会出错
b. 扩展事件处理程序的作用域链在不同浏览器中会导致不同结果
c. html与js代码紧密耦合

• DOM0 级事件处理程序

DOM0级方法指定的事件处理程序被认为是元素的方法，因此事件处理程序是在元素的作用域中运行的，即程序中的this引用当前元素。

var btn = document.getElementById('myBtn');
btn.onclick = function() {
    //'myBtn'
    alert(this.id);
}

DOM0级方式添加的事件处理程序会在事件的冒泡阶段被处理
删除DOM0级方法指定的事件处理程序

btn.onclick = null;

• DOM2级事件处理程序

DOM2级事件定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。

var btn = document.getElementById('myBtn');
var handler = function() {
    alert(this.id);
};
btn.addEventListener('click',handler,false);//添加事件
btn.removeEventListener('click',handler,false);//移除事件