DOM事件

Javascript与html之间的交互是通过事件进行交互。事件是通过侦听器（交互处理程序）来预定执行的。 页面中哪部分会拥有某个特点的事件？当你点击页面中的任何一个元素，其实就是点击了整个页面，用书上的例子来说： 当你画一个同心圆的时候，把手指放在圆心，你手指指向的不单单是一个圆，而是全部的圆。

事件流

事件流指的是页面中接收事件的顺序，DOM2级事件规定事件流包括三个步骤，分别为：

1.捕获阶段 捕获阶段是为了截获事件提供机会
2.处于目标阶段 这个阶段表示目标接收到事件
3.冒泡阶段 这个阶段可以对事件做出响应

事件处理程序

事件指的是比如单击(click)、双击(dbclick)、鼠标移动(mouseover)、键盘按键(keydown\keyup)等都属于事件，那事件处理程序就是处理事件发生时候执行的一个程序。而在html中会有一个和事件处理程序名字对应的一个属性。

DOM0级事件处理程序

DOM0级事件处理程序是通过javascript代码取得一个元素的引用然后把一个函数赋值给对应的事件处理程序属性。这样方式添加的事件处理程序会在事件流中的冒泡阶段被处理。

1 var newimg = document.getElementsByTagName("img")[0]; 

2 

3 newimg.onlick = function(){alert(1)};

 

DOM2级事件处理程序

DOM2级事件添加了两个专门处理事件的方法，所有的DOM节点都包含了这两个方法。分别为: addEventListener() 这个方法用于添加DOM事件，在所有DOM节点上都可以调用此方法，此方法接收三个参数分别为事件名称、处理程序和布尔值（为true则在捕获阶段调用事件处理程序，为false在冒泡阶段调用事件处理程序）

1 var body = document.getElementsByTagName("body"); 

2 body.addEventListener("onclick",function(){alert(1)},true);

 

removeEventListener() 这个方法和addEventListener()方法相反，是删除相应的事件，同样接收三个参数，这三个参数完全和addEventListener() 一样。

1 var body = document.getElementsByTagName("body"); 

2 function handles(){alert(1)}; body.addEventListener("onclick",handles,true); 

3 var body = document.getElementsByTagName("body"); 

4 body.removeEventListener("onclick",handles,true);

 

注意这里没有直接添加匿名函数而是用function创建了一个函数，removeEventListener()方法是无法删除匿名函数，就算你传入进去的匿名函数和添加的匿名函数完全一样还是不能删除，所以这里注意。

事件对象

当事件触发的时候，事件会产生一个事件对象event,这个对象里面包含了当前触发事件的一些相关信息。这个对象DOM0级和DOM2级的都支持，也就是说只要兼容DOM的浏览器都会有这样的一个对象。

1 var body = document.getElementsByTagName("body");

2 

3 function handles(event){alert(event.type)}; 

4 

5 body.addEventListener("onclick",handles,true); //输出click

 

event对象的属性：

1、bubbles 返回布尔值，指示事件是否是起泡事件类型。
2、cancelable 返回布尔值，指示事件是否可拥可取消的默认动作。
3、currentTarget 返回其事件监听器触发该事件的元素。
4、eventPhase 返回事件传播的当前阶段。
5、target 返回触发此事件的元素（事件的目标节点）。
6、timeStamp 返回事件生成的日期和时间。
7、type 返回当前 Event 对象表示的事件的名称。

event对象的方法：

1、initEvent() 初始化新创建的 Event 对象的属性。
2、preventDefault() 通知浏览器不要执行与事件关联的默认动作。
3、stopPropagation() 不再派发事件。