事件模型以及事件代理/委托

事件流

事件流是指事件传播的顺序，通常分为三个阶段：事件捕获阶段，处于目标阶段以及事件冒泡阶段。

但是低版本IE不支持事件捕获阶段。

事件处理程序

DOM0事件处理程序

DOM0级指定的事件处理程序被认为是元素的方法。因此这时候事件处理程序是在元素的作用域中运行，也就是说this指向当前元素。
方法：

var btn = document.getElementById("btn");
btn.onClick = function() {
    .....
}

DOM2级事件处理程序

DOM2定义了两个方法来处理事件处理程序，addEventListener()和removeEventListner().所有DOM节点都包含这两个方法。

var btn = document.getElementById("btn");
btn.addEventListner("click", function() {...}, false);
第一个参数click: 表示事件
第二个参数: 表示事件处理函数
第三个参数: 表示事件流处理方式，如果是true表示在捕获阶段调用事件处理程序。如果是false表示在冒泡阶段调用事件处理程序。

该方法的好处是可以为一个元素上的某个事件添加多个事件处理程序。

!!!特别注意：通过addEventListner()添加的事件处理程序只能通过removeEventListner()来移除，并且移除时的参数必须与添加时的参数一模一样，否则无法移除。这也意味着通过addEventListner添加的匿名函数无法移除。

IE事件处理程序

和DOM2相似，attachEvent()和detachedEvent()，因为IE8以前只支持事件冒泡，所以通过attachEvent()添加的事件处理程序只能被添加到冒泡阶段。

var btn = document.getElementById("btn");
btn.attachEvent("onClick", function() {...}, false);

区别与比较

1. IE中的attachEvent与DOM0级方法主要区别是事件处理程序的作用域的区别。attachEvent中的this指向全局，而DOM0事件处理方法中的this指向对应元素。
2. IE中的attachEvent也可以绑定多个事件处理程序。但是处理顺序与DOM2中事件处理程序相反。
3. IE中使用detachEvent时，也要参数与attachEvent相同。

事件对象

注意以下几点：

1. IE的事件对象模型和其他的不一样。同时IE中的事件对象模型会作为属性加入到全局变量window中。
2. 模型中target与currentTarget的区别：

• currentTarget是指绑定回调函数的对象。该对象等同于this。
• target是真实事件发生的对象。

3. IE中的事件模型，srcElement等同于this，即currentTarget。

事件代理/委托

事件代理利用事件冒泡机制，只指定一个事件处理程序，就可以管理某一类型的所有事件。
优点：
1、可以大量节省内存占用，减少事件注册，比如在table上代理所有td的click事件就非常棒

2、可以实现当新增子对象时无需再次对其绑定事件，对于动态内容部分尤为合适
缺点：
如果把所有事件都用代理就可能会出现事件误判，即本不应用触发事件的被绑上了事件

补充：Js实现事件模型的bind和trigger

 var Emitter=function(){
        this._listeners={};
    };

    //注册事件
    Emitter.prototype.on=function(eventName,callback){
        var listeners=this._listeners[eventName]||[];
        listeners.push(callback);
        this._listeners[eventName]=listeners;
    }

    //触发事件
    Emitter.prototype.emit=function(eventName){
        var args=Array.prototype.slice.apply(arguments).slice(1),
            listeners=this._listeners[eventName],
            self=this;

        if(!Array.isArray(listeners))return;

        listeners.forEach(function(callback){
            try{
                callback.apply(this,args);
            }catch(e){
                console.error(e);
            }
        });
    }

    //实例
    var emitter=new Emitter();

    emitter.on('event',function(arg1,arg2){
        console.log('get event',arg1,arg2);
    })

    console.log('emit event');
    emitter.emit('event','arg1','arg2');