js事件模型1

传统方式

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

1. 传统绑定的优点
   (1)非常简单和稳定，可以确保它在你使用的不同浏览器中运作一致
   (2)处理事件时，this关键字引用的是当前元素，这很有帮组
2. 传统绑定的缺点
   (1)传统方法只会在事件冒泡中运行，而非捕获和冒泡
   (2)一个元素一次只能绑定一个事件处理函数。新绑定的事件处理函数会覆 盖旧的事件处理函数
   (3)事件对象参数(e)仅非IE浏览器可用

---

W3C方式

element.addEventListener('click', function(e){ // ... }, false);
1.W3C绑定的优点
(1)该方法同时支持事件处理的捕获和冒泡阶段。事件阶段取决于 addEventListener最后的参数设置：false (冒泡) 或 true (捕获)。
(2)在事件处理函数内部，this关键字引用当前元素。
(3)事件对象总是可以通过处理函数的第一个参数(e)捕获。
(4)可以为同一个元素绑定你所希望的多个事件，同时并不会覆盖先前绑 定的事件
2.W3C绑定的缺点
IE不支持，你必须使用IE的attachEvent函数替代

---

IE方式

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

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

2.IE方式的缺点
(1) IE仅支持事件捕获的冒泡阶段
(2) 事件监听函数内的this关键字指向了window对象，而不是当前元素（IE的一个巨大缺点）
(3) 事件对象仅存在与window.event参数中
(4) 事件必须以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;
}`

---

一个简单的例子

var oBtn1=document.getElementById('btn1'),
    oBtn2=document.getElementById('btn2');
    //Dom 0
    oBtn1.onclick=function(){
        alert('btn1');
    }
    //Dom1
    function addHandle(ele,type,fn){
        if(ele.addEventListener){
            ele.addEventListener(type,fn,false);
        } else if( ele.attachEvent){
            ele.attachEvent('on'+type,fn);
        } else {
            //其他IE低版本
            ele.on[type]=fn;
        }
    }
    //移除事件
    function removeHandle(ele,type,fn){
        if(ele.removeEventListener){
            ele.removeEventListener(type,fn,false);
        } else if(ele.detachEvent){
            ele.detachEvent('on'+type,fn);
        } else {
            ele.on[type]=fn;
            ele.on[type]=null;
        }
    }
    addHandle(oBtn2,'click',show);
    function show(){
        alert('DoM 2级的监听事件！！');
    }

`