- 

一：Event Handlder

一个Event Handlder就是嵌入DOM节点的JavaScript方法，当此节点发生事件时，那么它就会自动的被触发。如下图可以说明此概念。

例如： 

Code

Code

A：Default Actions

     浏览器响应事件通常的做法。大多数情况下，我们希望如此，但是也有一些时候，答案是否定的。

     阻止Default Actions发生的最简单的方法就是为此event创建一个event handler，然后return false。例如：我们修改上面创建的clickListeners。

Code

 B：this关键字

     当我们写一个event handler来关联到许多HTML中的元素时，那么this是一个不错的选择。它表现的有点像变量，但是我们不能给它赋值，它的值就是方法所执行的对象。例如：要打开所点击的URL。

Code

C：Event handler的缺陷。

     对一个html的元素，只能分配给它一个event handler，否则前面的event handler会不起作用，也就是被后面的所取代。

二：Event Listeners

     Event Listeners和Event handler比较相似，它也是嵌到dom节点里的JavaScript方法，但是我们可以分配许多的Event Listeners给一个HTML元素。如图所示。

     创建一个Event Listeners的代码：element.addEventListener("event", eventListener, false);第三个参数为true时，表示事件传播的时候出发该事件，false时则不考虑事件传播。在IE浏览器下，创建的代码：element.attachEvent("onevent", eventListener)；清除event handler的代码分别是：element.removeEventListener("event", eventListener, false);element.detachEvent("onevent", eventListener);

     在使用的时候，我们需要进行判断来保证对不同的浏览器使用正确的方法。例如：

Code

Code

A：Default Actions

     为了阻止Default Actions，我们使用preventDefault方法，在IE浏览器中，我们使用returnValue。例如：

Code

注：在IE中，event作为window对象的一个属性，可以直接使用，而在firefox中，需要通过传参的方式来传播事件。

B：事件传播

     事件传播分为3个阶段：

     1：捕获阶段。事件会沿着dom树，访问每一个节点，直到到达目标元素。但是在IE浏览器中没有此阶段，其实大多数开发者都避免使用capturing event listeners。

     2：结果程序执行阶段。浏览器要找分配到目标节点上的Event Listeners，然后执行它。

     3：事件冒泡阶段