标准事件模型和IE事件模型

在浏览器解析事件的时候，有两种触发方式，一种叫做Bubbling(冒泡)，另外一种叫做Capturing(捕获)。这里不做过多解释

---

这里分析三种绑定事件模式

1、 Traditional Module

传统方式的事件模型即直接在DOM元素上绑定事件处理器，例如—

window.οnlοad=function(){…}

obj.οnmοuseοver=function(e){…}

obj.οnclick=function(){…}

首先这种方式是无论在IE还是Firefox等其他浏览器上都可以成功运行的通用方式。这便是它最大的优势了，而且在Event处理函数内部的this变量无一例外的都指向被绑定的DOM元素，这使得Js程序员可以大大利用this关键字做很多事情。

缺点就是传统方式只支持Bubbling，而不支持Capturing，并且一次只能绑定一个事件处理器在DOM元素上，无法实现多Handler绑定。最后就是function参数中的event参数只对非IE浏览器有效果(因为IE浏览器有特制的window.event)。

2、 W3C (Firefox.e.g) Event Module

Firefox等浏览器很坚决的遵循W3C标准来制定浏览器事件模型，使用addEventListener和removeEventListener两个函数，看几个例子—

window.addEventListener(‘load’,function(){…},false);

document.body.addEventListener(‘keypress’,function{…},false);

obj.addEventListener(‘mouseover’,MV,true);

function MV(){…}

这里注意函数后面是否带（）

addEventListener带有三个参数，第一个参数是事件类型，就是我们熟知的那些事件名字去掉前面的’on’，第二个参数是处理函数，可以直接给函数字面量或者函数名，第三个参数是boolean值，表示事件是否支持Capturing。

W3C的事件模型优点是Bubbling和Capturing都支持，并且可以在一个DOM元素上绑定多个事件处理器，各自并不会冲突。并且在处理函数内部，this关键字仍然可以使用只想被绑定的DOM元素。另外function参数列表的第一个位置(不管是否显示调用)，都永远是event对象的引用。

至于它的缺点，很不幸的就只有在市场份额最大的IE浏览器下不可使用这一点。

3、 IE Event Module
IE自己的事件模型跟W3C的类似，但主要是通过attachEvent和detachEvent两个函数来实现的。依旧看几个例子吧—

window.attachEvent(‘onload’,function(){…});

document.body.attachEvent(‘onkeypress’,myKeyHandler);

可以发现它跟W3C的区别是没有第三个参数，而且第一个表示事件类型的参数也必须把’on’给加上。这种方式的优点就是能绑定多个事件处理函数在同一个DOM元素上。

至于它的缺点，为什么如今在实际开发中很少见呢？首先IE浏览器本身只支持Bubbling不支持Capturing；而且在事件处理的function内部this关键字也无法使用，因为this永远都只想window object这个全局对象。要想得到event对象必须通过window.event方式，最后一点，在别的浏览器中，它显然是无法工作的。

跨浏览器的注册事件和移除事件：

//注册
function addEventHandler(element,
 evtName, callback, useCapture) { 
   //DOM标准
    if (element.addEventListener)
 { 
          element.addEventListener(evtName,
 callback, useCapture); 
    }else {
       //IE方式,忽略useCapture参数
       element.attachEvent('on' +
 evtName, callback); 
    }
}
//移除
//注册
function removeEventHandler(element,
 evtName, callback, useCapture) { 
   //DOM标准
    if (element.removeEventListener)
 { 
          element.removeEventListener(evtName,
 callback, useCapture); 
    }else {
       //IE方式,忽略useCapture参数
       element.dettachEvent('on' +
 evtName, callback); 
    }
}

其他：

1、 当我们需要阻止浏览器某DOM元素的默认行为的时候在W3C下调用e.preventDefault()，而在IE下则通过window.event.returnValue＝false来实现。

跨浏览器阻止默认行为：

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

2、当我们要阻止事件冒泡的时候，在W3C标准里调用e.stopPropagation()，而在IE下通过设置window.event.cancelBubble=true来实现。

跨浏览器阻止冒泡：

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