[js]事件模型及事件代理/委托

原文链接：http://www.cnblogs.com/xxcanghai/p/5205998.html

1、事件的三个阶段：事件捕获、目标、事件冒泡 （低版本的IE不支持捕获）

2、传统、IE和W3C不同绑定事件、解绑事件的方法有什么区别，参数分别是什么，以及事件对象e有什么区别

传统方法：

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

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

IE方式：

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

1. IE方式的优点
   • 可以为同一个元素绑定你所希望的多个事件，同时并不会覆盖先前绑定的事件。
2. IE方式的缺点
• IE仅支持事件捕获的冒泡阶段
• 事件监听函数内的this关键字指向了window对象，而不是当前元素（IE的一个巨大缺点）
• 事件对象仅存在与window.event参数中
• 事件必须以ontype的形式命名，比如，onclick而非click
• 仅IE可用。你必须在非IE浏览器中使用W3C的addEventListene

W3C方式

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

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

适应各种浏览器

　　var event = {
        addHander:function(element,type,fun){
            if(element.addEventListener){//dom2 非ie模式
                 element.addEventListener(type,fun,false);
            }else if(element.attachEvent){
                 element.attachEvent("on"+type,fun);//dom2 ie模式
            }else{
                 element["on"+type] = fun;//dom0 传统模式 支持ie8以上及非ie
            }
        },
        removerHander:function(element,type,fun){
            if(element.removeEventListener){
                 element.removeEventListener(type,fun,false);
            }else if(element.detachEvent){
                 element.detachEvent("on"+type,fun);
            }else{
                 element["on"+type] = null;
            }
        },
        getEvent:function(event){//event对象 非ie || ie
            return event ? event : window.event;
        },
        getTarget:function(event){//获取当前目标元素 非ie || ie
            return event.getTarget || event.srcElement;
        },
        preventDefalut:function(event){//阻止默认事件
            if(event.preventDefalut){
                event.preventDefalut();
            }else{
                event.returnValue = false;
            }
        },
        stopPropagation:function(event){//阻止捕获或冒泡
            if(event.stopPropagation){
                event.stopPropagation();
            }else{
                event.cancelBubble = true;
            }
        }
    }

3、事件的代理/委托的原理以及优缺点，这是靠事件的冒泡机制来实现的

　　(1)、可以大量节省内存占用，减少事件注册，比如在table上代理所有td的click事件就非常棒

　　(2)、可以实现当新增子对象时无需再次对其绑定事件，对于动态内容部分尤为合适

那么极有可能要求让你【实现事件模型】，即写一个类或是一个模块，有两个函数，

一个bind一个trigger，分别实现绑定事件和触发事件，

核心需求就是可以对某一个事件名称绑定多个事件响应函数，

然后触发这个事件名称时，依次按绑定顺序触发相应的响应函数。