JavaScript学习（十七） DOM事件模型

定义：

DOM（文档对象模型）结构是一个树形结构，当一个HTML元素产生一个事件时，该事件会在元素节点与根节点之间的路径传播，路径所经过的节点都会收到该事件，这个传播过程可称为DOM事件流。

主流浏览器的事件模型

直到DOM Level3中规定后，多数主流浏览器才陆陆续续支持DOM标准的事件处理模型一捕获型与冒泡型。

目前除IE浏览器外，其他主流的Firefox、Opera、 Safari 都支持标准的DOM事件处理模型。IE仍然使用自己的模型，即冒泡型，该模型的一部分被DOM采用。这点对于开发者来说也是有好处的，只使用 DOM标准，IE共有的事件处理方式才能有效地跨浏览器。
冒泡型事件(Bubbling) :从DOM树形结构上理解，就是事件由叶子节点沿祖先节点一直向上传递直到根节点:从浏览器界面视HTML元素排列层次上理解就是事件由具有从属关系的最确定的目标元素一直传递到最不确定的目标元素。
推获型事件(Capturing) : Netscape Navigator的实现。 它与冒泡型刚好相反。由DOM树最项层元素一直到最精确的元素。
DOM标准事件模型:因为两个不同的模型都有其优点和解释，DOM标准支持捕获型与冒泡型,可以说是它们两者的结合体。它可以在个DOM元素上绑定多个事件处理器。并且在处理函数内部,this关键字仍然指向被绑定的DOM元素，另外处理函数参数列表的第一个位置传递事件event对象。
首先是捕获式传递事件。接着是冒泡式传递，所以，如果一个处理函数既注册了捕获型事件的监听又注册了冒泡型事件监听，那么在DOM事件模型中它就会被调用两次。

事件对象

在IE浏览器中事件对象是window对象的一个属性event，并且event对象只能在事件发生时被访问，所有事件处理完成后，该对象就消失了。而标准的DOM中规定event必须作为唯一的参数传给事件处理函数。故为了实现兼容性，通常采用下面的方法：

function someHandle(event){

if(window.event) event=window.event;

}

在检测Shift. Alt和Ctrl这3个键时，两种浏览器事件使用的方法也是一样的。

在IE中，事件的对象包含在event 的srcElement属性中，而在标准的DOM浏览器中，对象包含在target属性中。

为了处理两种浏览器兼容性，举例如下:

   function handle(oEvent){

      if(window.event) oEvent = window.event;  //处理兼容性，获得事件对象

      var oTarget;

      if(oEvent.srcElement)  //处理兼容性，获取事件目标

      oTarget = oEvent.srcElement;

      else

      oTarget = oEvent.target;

      alert(oTarget.tagName);  //弹出目标的标记名称

      }

      window.onload = function(){

      var olmng =document.getElementsByTaganme("img")[0];

     olmg.onclick = handle;

      }

注册与移除事件监听器

1. IE下注册多个事件监听器与移除监听器方法

IE浏览器中的HTML元素有一个attachEvent()方法允许外界注册该元素多个事件监听器。例如:

element. attachEvent('onclick', observer);

注意
在IE7中注册多个事件时，后加入的函数先被调用。

要移除先前注册的事件的监听器，调用element的detachEvent()方法即可，参数相同。例如:
element. detachEvent('onclick, observer);
2. DOM标准下注册多个事件监听器与移除监听器方法

实现DOM标准的浏览器与IE浏览器中注册元素事件监听器方式有所不同，它通过元素的addEventListener方法注册，该方法既支持注册冒泡型事件处理，又支持捕获型事件处理。

element.addEventListener('click', observer, useCapture);
addEventListener()方法接受3个参数。第一个参数是事件名称，值得注意的是，这里事件名称与IE不同。事件名称是不以"on"开头的:第二个参数obsever是回调处理函数:第3个参数注明该处理回调函数是在事件传递过程中的捕获阶段被调用还是冒泡阶段被调用，默认true为捕获阶段。

移除已注册的事件监听器调用element的removeEventListener()即可，参数不变。               element.removeEventListener('click', observer, useCapture);

3.直接在DOM节点上加事件
(1)如何取消浏览器事件的传递与事件传递后浏览器的默认处理
取消事件传递，是指停止捕获型事件或冒泡型事件的进一步传递。例如，在冒泡型事件传递中，在body处理停止事件传递后，位于上层的document的事件监听器就不再收到通知，不再被处理。
事件传递后的默认处理，是指浏览器在事件传递并处理完后会执行与该事件关联的默认动作(如果存在这样的动作)。
(2)取消浏览器的事件传递
在IE下，通过设置event对象的cancelBubble为true即可。

function someHandle() {
window.event.cancelBubble = true;}

DOM标准通过调用event对象的stopPropagation()方法即可。 

function someHandle(event) {event.stopPropagation();}

因此，跨浏览器的停止事件传递的方法是:

 function someHandle(event) {  
event = event||window.event;
if(event.stopPropagation)
  event.stopPropagation();
else event.cancelBubble = true;
}

(3)取消事件传递后的默认处理
在IE下，通过设置event对象的returnValue为false即可。

function someHandle() {
window.event.returnValue = false;
}

DOM标准通过调用event 对象的preventDefault()方法即可。

function someHandle(event) {event.preventDefault();}

因此，跨浏览器的取消事件传递后的默认处理方法是:

function someHandle(event) {
event = event || window.event;
if(event.preventDefault)
event.preventDefault();
else event.returnValue = false;}