传统方式

element.onclick = function(e){ // ... };

传统绑定的优点
- 非常简单和稳定，可以确保它在你使用的不同浏览器中运作一致
- 处理事件时，this关键字引用的是当前元素，这很有帮组

传统绑定的缺点
- 传统方法只会在事件冒泡中运行，而非捕获和冒泡
- 一个元素一次只能绑定一个事件处理函数。新绑定的事件处理函数会覆盖旧的事件处理函数
- 事件对象参数(e)仅非IE浏览器可用

W3C方式

element.addEventListener('click', function(e){ // ... }, false);

W3C绑定的优点
- 该方法同时支持事件处理的捕获和冒泡阶段。事件阶段取决于addEventListener最后的参数设置：false (冒泡) 或 true (捕获)。
- 在事件处理函数内部，this关键字引用当前元素。
- 事件对象总是可以通过处理函数的第一个参数(e)捕获。
- 可以为同一个元素绑定你所希望的多个事件，同时并不会覆盖先前绑定的事件

W3C绑定的缺点

IE不支持，你必须使用IE的attachEvent函数替代。

IE方式

element.attachEvent('onclick', function(){ // ... });

IE方式的优点
- 可以为同一个元素绑定你所希望的多个事件，同时并不会覆盖先前绑定的事件。

IE方式的缺点

IE仅支持事件捕获的冒泡阶段

事件监听函数内的this关键字指向了window对象，而不是当前元素（IE的一个巨大缺点）

事件对象仅存在与window.event参数中

事件必须以ontype的形式命名，比如，onclick而非click

仅IE可用。你必须在非IE浏览器中使用W3C的addEventListener

Dean Edwards的方案（addEvent/removeEvent库）

function addEvent(elementment, type, handler) {            // 为每个事件处理函数赋予一个独立的ID        if(!handler.$$guid) handler.$$guid = addEvent.guid++;            // 为元素建立一个事件类型的散列表        if(!elementment.events) elementment.events = {};            // 为每对元素/事件建立一个事件处理函数的散列表        var handlers = elementment.events[type];            if(!handlers) {            handlers = elementment.events[type] = {};            // 存储已有的事件处理函数(如果已存在一个)            if(elementment["on" + type]) {                handlers[0] = elementment["on" + type];            }        }            // 在散列表中存储该事件函数        handlers[handler.$$guid] = handler;            // 赋予一个全局事件处理函数来出来所有工作        elementment["on" + type] = handleEvent;    }        // 创建独立ID的计数器    addEvent.guid = 1;        function removeEvent(elementment, type, handler) {        // 从散列表中删除事件处理函数        if(elementment.events && elementment.events[type]) {            delementte elementment.events[type][handler.$$guid];        }    }        function handleEvent(event) {        var returnValue = true;            // 获取事件对象(IE使用全局的事件对象)        event = event || fixEvent(window.event);            // 获取事件处理函数散列表的引用        var handlers = this.events[event.type];            // 依次执行每个事件处理函数        for(var i in handlers) {            this.$$handerEvent = handlers[i];            if(this.$$handlerEvent(event) === fasle) {                returnValue = false;            }        }        return returnValue;    }        // 增加一些IE事件对象缺乏的方法    function fixEvent(event) {        event.preventDefault = fixEvent.preventDefault;        event.stopPropagation = fixEvent.stopPropagation;        return event;    }        fixEvent.preventDefault = function() {        this.returnValue = false;    }        fixEvent.stopPropagation = function() {        this.cancelBubble = true;    }