[js]事件流与事件处理程序

事件流

事件
是文档或在浏览器窗口发生的特定的交互瞬间。
js和html之间的交互都是通过事件触发的。
事件流概述
当浏览器发展到第四代时（IE4和Netscape Communicator 4）,浏览器的开发团队遇到一个很有意思的问题：页面的哪一部分会拥有特定的事件？想象下在一张纸上有一组同心圆，如果你把手指放在圆心上，那么你的手指指向的不是一个圆，而是一组圆。两家公司的开发团队在看待浏览器事件方面还是一致的。如果你单击了某个按钮，那么同时你也单击了按钮的容器元素，甚至整个页面。

事件流描述的是从页面中接受事件的顺序。但有意思的是，IE和Netscape开发团队居然提出了两个截然相反的事件流概念，也就是IE提出的事件冒泡流和Netscape提出的事件捕获流。

• 事件冒泡
  指事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点（这也是我们现在所常用的事件流）。
• 事件捕获
  不太具体的节点应该更早的接收到事件，而最具体的节点应该在最后接收到节点。

事件流分级

DOM0级
所有浏览器都支持DOM0级事件处理程序，且使用该方式时，事件处理程序是在元素的作用域中运行，因此程序中的this都是指向元素。
添加事件

var oDiv1 = document.getElementById("div1");
  oDiv1.onclick = function(){
  alert(this===oDiv1);//true
}

移出事件
oDiv1.onclick = null;
目前为止，我还是非常喜欢DOM0级事件处理程序的，没有浏览器兼容性问题；但是一个DOM0级事件只能给某一个元素添加一个事件处理函数，而DOM2级事件处理程序（事件监听机制）可以给同一个元素依次添加多个事件处理；

DOM2级

IE9(含)以上，firefox，chrome，safari使用以下方法:

• 添加事件

oDiv.addEventListener(" click ",fOne,false);
oDiv.addEventListener(" click ",fTwo,false);
oDiv.addEventListener(" click ",fThree,false);

注意：这里的事件名是在DMO0级的基础上去掉"on"的，这里的false是指不使用事件捕获流。

• 移除事件

oDiv.removeEventListener(" click ",fOne,false);
oDiv.removeEventListener(" click ",fTwo,false);

注意：在移除事件时，事件处理程序的参数序和添加时的参数一致。

IE8（含）以下的IE浏览器使用以下方法：
oDiv.attachEvent(" onclick ",fOne);
移出事件处理：
oDiv.detachEvent(" onclick ",fOne);
注意参数变化。