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事件传播。
8月17号=》421页-430页,布布扣,bubuko.com