15.3　　DOM的事件模型

15.3.1　　绑定事件处理器

　　　　DOM也提供了一种事件绑定机制，这种机制和Internet Explorer的attachEvent()方法类似，但是有自己独特的语法。DOM所提供的

　　　　事件绑定方法是addEventListener()，该方法的语法格式如下。

　　　　　　objectTarget.addEventListener("eventType",handler,captureFlag)：该方法为objectTarget绑定事件处理器handler，其

　　　　　　第一个参数是事件类型字符串(将前面的事件属性去掉前缀“on”，例如click、mousedown、keypress等)；第二个参数是事件处理

　　　　　　函数；第三个参数用于指定监听事件传播的哪个阶段（true表示监听捕获阶段，false表示监听冒泡阶段）。

　　　　与addEventListener()方法相对应，DOM也提供了一个方法用于删除事件处理器，该方法为removeEventListener。

　　　　其语法格式如下：

　　　　　　objectTarget.removeEventListener("eventType",handler,captureFlag)：该方法为objectTaret删除事件处理器handler，参数

　　　　　　与addEventListener()方法的3个参数完全类似。

15.3.2　　访问事件对象

　　　　前面已经提到，DOM事件模型与Internet Explorer事件模型访问事件对象的方式不同，在DOM的事件模型中，当浏览器

　　　　检测到发生了某个事件时，将自动创建一个Event对象，并隐式地将该对象作为事件处理函数的第一个参数传入。

　　　　代码示范：

　　　　　　var clickHandler = function(evt)

　　　　　　{

　　　　　　　　alert(evt.target.innerHTML);

　　　　　　}

　　　　　　document.getElementById("a").onclick = clickHandler;

　　　　　　<button id="a">按钮</button>

　　　　点击按钮将弹出“按钮”对话框。

　　　　DOM提供了一套完整的事件继承体系，下面是具体的对应关系。

　　　　　　Event：对应有abort、blur、change、error、focus、load、reset、resize、scroll、select、submit、unload等事件。

　　　　　　MouseEvent：对应有click、mousedown、mousemove、mouseout、mouseover、mouseup等事件。

　　　　　　UIEvent：对应有DOMActivate、DOMFocusln、DOMFocusOut等事件。

　　　　　　MutationEvent：对应有DOMAttrModified、DOMCharacterDataModified、DOMNodeInserted、DOMNodeInsertedIntoDocument、

　　　　　　　　　　　　　　DOMNodeRemoved、DOMNodeRemovedFormDocument、DOMSubtreeModified等事件。

　　　　在Event接口里定义了如下属性。

　　　　　　type：返回该事件的类型，该属性值与注册事件处理器时所用的事件类型字符串相同（例如click、mouseover等）。

　　　　　　target：返回触发事件的事件源。

　　　　　　currentTarget：返回事件当前所在的事件源。该属性值与target属性可以不同，如果在捕获或冒泡阶段处理该事件，则该属性值与target属性

　　　　　　　　　　　　　　返回的对象并不相同。基本上，该属性可以代替事件处理器中的关键字this。

　　　　　　eventPhase：返回该事件正处在哪个阶段，可能的值有Event.CAPTURING_PHASE(捕获阶段)、Event.AT_TARGET或

　　　　　　　　　　　　  Event.BUBBLING_PHASE(冒泡阶段)。

　　　　　　timeStamp：返回一个Date对象，代表事件的发生事件。

　　　　　　bubbles：返回一个boolean值，用以表示该类事件是否支持冒泡。

　　　　　　cancelable：返回一个boolean值，用以指定该事件是否有默认行为，且可以通过preventDefault()方法来取消默认行为。

　　　　UIEvent接口定义了如下两个属性。

　　　　　　view：返回window对象，也就是发生该事件的窗口。

　　　　　　detail：返回一个数字，该数字可以提供一些附加意义。例如对click、mousedown和mouseup事件，event属性返回1代表单击，

　　　　　　　　　　2代表双击，3代表三击(鼠标每次单击都会产生一个事件，如果两次单击的时间足够接近，它们就会变成一次双击事件)。

　　　　MouseEvent接口继承了UIEvent，它不仅可以使用Event接口的所有属性，也可以访问UIEvent接口的全部属性。

　　　　该接口里包含如下几个属性。

　　　　　　button：返回一个数字，代表触发事件的鼠标键。其中0代表鼠标左键，1代表鼠标中键，2代表鼠标右键。只有当浏览者改变了鼠标键状态

　　　　　　　　　　时才可以访问该属性，例如mousemove事件就不可访问该属性。

　　　　　　altKey、ctrlKey、metaKey、shiftKey：这4个属性都返回boolean值，用于显示发生该鼠标事件时，是否同时按下了Alt、Ctrl、Meta或Shift功能键。

　　　　　　clientX、clientY：返回鼠标事件的发生位置，该位置以浏览者的浏览窗口作为坐标系。注意：该位置完全不考虑document的滚动位置，即使把浏览器

　　　　　　　　　　　　　　滚动条拖到下面，只要鼠标事件在浏览器上方发生，clientY属性依然是0。DOM模型并没有提供标准方法来完成window坐标到

　　　　　　　　　　　　　　document坐标之间的转换，所以开发者必须手动实现转换。在除IE之外的其他浏览器中，可以再为这两个属性分别添加

　　　　　　　　　　　　　　window.pageXOffset和window.pageYOffset来完成window坐标到document坐标的转换。

　　　　　　screenX、screenY：返回鼠标事件的发生位置，该位置以用户显示器作为鼠标位置的坐标系。当开发者试图在鼠标位置打开一个新的浏览器时，

　　　　　　　　　　　　　　　　这两个属性比较有用。

　　　　　　relatedTarget：返回该事件事件源的相关节点。对于mouseover事件，该属性值返回在鼠标离开某个HTML元素之前离开的HTML元素；对于mouseout

　　　　　　　　　　　　　　事件，该属性值返回在鼠标离开某个HTML元素后立即进入的HTML元素。其他事件通常没有该属性。

15.3.3　　事件传播

　　　　DOM模型的事件先后沿着两个方向传播：在第一个阶段，也就是前面提到的事件捕获阶段，事件从最顶层的对象依次向下传播，因此先触发顶层对象

　　　　的事件处理函数，然后依次向下，直到传播到事件所发生的最底层对象；接着进入第二个阶段，也就是前面提到的事件冒泡阶段，事件传播从底层一直

　　　　上溯，直到最顶层的对象。

　　　　为了阻止事件传播，DOM为Event对象提供了stopPropagation()方法，该方法的语法格式如下：

　　　　　　event.stopPropagation()：阻止event事件传播。