事件模型

1、事件冒泡：事件开始时由最具体的元素（文档中嵌套层次最深的节点）接收，然后逐级向上传播到较为不具体的节点。

      事件捕获：不太具体的节点应该更早接收到，而最具体的节点应该最后接收到事件。

      事件流：包括三个阶段：事件捕获阶段、处理目标阶段、事件冒泡阶段。首先发生的是事件捕获，为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶段，可以在这个阶段对事件作出响应。

2、三种事件模型：DOM0级事件模型、IE事件模型、DOM2级事件模型

3、DOM0级事件模型：又称为原始事件模型，在该模型中，事件不会传播，即没有事件流的概念。

1）HTML代码直接绑定事件

<input type="button" onclick="fun()">

注意：a）存在一个时差问题。用户如果在HTML元素一出现就触发相应地事件，但是当时事件处理程序还不具备执行条件，此时会引发错误。所以很多HTML事件处理程序会被封装在一个try-catch块中。

<input type="button" onclick="try{fun()}catch(ex){}">

b)扩展事件处理程序的作用域链在不同浏览器中会导致不同的结果。

c）HTML和Javascript的紧密耦合。如果要更换事件处理程序，就要改动两个地方：HTML代码和Javascript代码。

2）通过JS指定属性值

var btn=document.getElementById('myBtn');

btn.οnclick=function(){

   alert("this.id");//myBtn

};

btn.οnclick=null;//删除事件处理程序

注意：a）这些代码在运行以前不会指定事件处理程序，因此如果这些代码在页面中位于按钮后面，就有可能在一段时间内怎么单击都没有反应。

b）此时事件处理程序是在元素的作用域中运行。

3、DOM2级事件处理程序

两个方法：addEventListener（）、removeEventListener（）

1）添加事件处理程序

var btn=document.getElementById("myBtn");

btn.addEventListener("click",function(){

alert("this.id");//在元素的作用域中运行

},false);//true:表示在捕获阶段调用事件程序；false：表示在冒泡阶段调用事件程序

btn.addEventListener("click",function(){

alert("HELLO");

},false);

注意：要处理的事件名前面没有加on，可以添加多个事件处理程序，事件处理程序按照添加他们的顺序触发。

2）移除事件处理程序

var btn=document.getElementById("myBtn");

var handler=function(){

alert("Click");

}

btn.addEventListener("click",handler,false);

btn.removeEventListener("click",handler,false);

注意：addEventListener()添加的事件处理程序只能用removeEventListener()删除，并且emoveEventListener()无法删除addEventListener()添加的匿名函数。

4、IE事件处理程序

两个方法：attachEvent()、detachEvent()

1)添加事件处理程序

vat btn=document.getElementById("myBtn");

btn.attachEvent("onclick",function(){

alert("this===window");//true 

});

注意：a）事件处理程序会在全局作用域中运行

          b）事件名为onclick

          c）可以添加多个事件处理程序

2）删除事件处理程序

var btn=document.getElementById("myBtn");

var handler=function(){

alert("Click");

}

btn.attachEvent("click",handler);

btn.detachEvent("click",handler);

注意：无法移除匿名参数