js事件详解

事件流

DOM事件流的三个阶段：1、事件捕获阶段 2、处于目标阶段 3、事件冒泡阶段

要理解事件流我们先来看一看事件的整个传播过程：

　　事件捕获阶段：用户触发事件window-->document-->html-->body-->祖先节点-->.......-->父节点-->目标元素

　　事件冒泡阶段：目标元素-->父节点-->......->祖先节点-->body-->html-->document-->window

所有的浏览器都实现了事件冒泡(网景除外)。

IE9+和所有的现代浏览器也都支持事件捕获并且是从window开始捕获的。

NOTE：由于低版本IE(IE8-)不能实现事件捕获，因此很少用。

事件处理程序

响应某个事件的处理函数就是事件处理程序。

1、html事件处理程序

<input type="button" value="单击事件" oncick="fnHandler()" />

NOTE：在html事件处理程序中使用双引号、大于、小于等符号时可以使用实体符代替。

<button onclick="fnShow(&quot;hello&quot;)">单击事件</button>
<script>
    function fnShow(sMsg){
        alert(sMsg);
    }
</script>

缺点：

　　1、时差问题。当事件处理程序代码放在元素的后面，在事件处理程序没有解析完成用户就出发了事件就会报错；

　　2、html代码和javascript代码耦合比较高。

2、DOM0级事件处理程序

　　将函数赋值给元素的事件处理程序属性

    var oBtn = document.getElementById('btn');
    oBtn.onclick = function(){
        alert('clicked');
    }

　　删除DOM0级事件处理程序，就是将该事件处理属性设置为null。

    var oBtn = document.getElementById('btn');
    oBtn.onclick = function(){
        alert('clicked');
    }
    oBtn.onclick = null;

3、DOM2级事件处理程序

　　DOM2级事件处理程序提供了两个方法：addEventListener和removeEventListener。他们包含三个参数：事件名、事件处理函数、布尔值(true捕获、false冒泡).

    var oBtn = document.getElementById('btn');
    oBtn.addEventListener('click', function(){
        alert('clicked');
    }, false);

　　好处：可以给同一个事件添加多个事件处理函数。

    var oBtn = document.getElementById('btn');
    oBtn.addEventListener('click', function(){
        alert('clicked');
    }, false);
    oBtn.addEventListener('click', function(){
        alert('clicking');
    }, false);

　　通过addEventListener添加的事件处理程序只能通过removeEventListener来删除。

NOTE：通过addEventListener添加的匿名函数不能被reomveEventListener删除。

    // 添加的和删除的不是同一个函数。在堆内存中不一样。
    var oBtn = document.getElementById('btn');
    oBtn.addEventListener('click', function(){
        alert('clicked'); // 任然会执行
    }, false);
    oBtn.removeEventListener('click', function(){
        alert('clicked');
    }, false);

4、IE8-事件处理程序

　　IE8-实现了DOM类似的两个事件处理方法：attachEvent()、detachEvent()。通过这两个方法只能添加事件到冒泡阶段。

    var oBtn = document.getElementById('btn');
    oBtn.attachEvent('onclick', function(){ // 事件名前要加on
        alert('clicked');
    });

NOTE：使用attachEvent添加事件时的执行作用域是全局作用域。

    var oBtn = document.getElementById('btn');
    oBtn.attachEvent('onclick', function(){ 
        alert(this == window); // true
        alert('clicked');
    });
    oBtn.addEventListener('click', function(){
        alert(this == window); // false
        alert('clicked');
    }, false);

NOTE：在IE9、10中任然保留了这两个方法并且可以和addEventListener叠加事件，不能相互删除对应事件，IE11+已经没有这两个方法了。

    var oBtn = document.getElementById('btn');
    oBtn.attachEvent('onclick', fnHandler); // 添加
    oBtn.removeEventListener('click', fnHandler, false); // 删除
    function fnHandler(){
        alert('clicked'); // 任然执行
    }
    oBtn.addEventListener('click', fnHandler1, false); // 添加
    oBtn.detachEvent('onclick', fnHandler1); // 删除
    function fnHandler1(){
        alert('clicked1'); // 任然执行
    }

NOTE：attachEvent(先添加后执行)添加多个事件时与addEventListener(先添加先执行)事件执行顺序相反。在IE8-中是这样的，但是在IE9、10中却是先添加先执行。

    var oBtn = document.getElementById('btn');
    oBtn.attachEvent('onclick', function(){
        alert('attach1');
    });
    oBtn.attachEvent('onclick', function(){
        alert('attach2');
    });

    oBtn.addEventListener('click', function(){
        alert('add1');
    });
    oBtn.addEventListener('click', function(){
        alert('add2');
    });

跨浏览器的事件处理程序实现

首先检查DOM2级事件处理程序、再检测IE事件处理程序、最后通过DOM0级事件处理程序。

    var oBtn = document.getElementById('btn');
    var EventUtil = {
        addHandler: function(oDom, sEventType, fnHandler){
            if(oDom.addEndEventListener){
                oDom.addEndEventListener(sEventType, fnHandler, false);
            }else if(oDom.attachEvent){
                oDom.attachEvent('on' + sEventType, fnHandler);
            }else{
                oDom['on' + sEventType] = fnHandler;
            }
        },
        removeHandler: function(oDom, sEventType, fnHandler){
            if(oDom.removeEndEventListener){
                oDom.removeEndEventListener(sEventType, fnHandler, false);
            }else if(oDom.detachEvent){
                oDom.detachEvent('on' + sEventType, fnHandler);
            }else{
                oDom['on' + sEventType] = null;
            }
        }
    }

跨浏览器的事件对象

    var EventUtil = {
        // 绑定事件
        addHandler: function(oDom, sEventType, fnHandler){
            if(oDom.addEndEventListener){
                oDom.addEndEventListener(sEventType, fnHandler, false);
            }else if(oDom.attachEvent){
                oDom.attachEvent('on' + sEventType, fnHandler);
            }else{
                oDom['on' + sEventType] = fnHandler;
            }
        },
        // 解除事件
        removeHandler: function(oDom, sEventType, fnHandler){
            if(oDom.removeEndEventListener){
                oDom.removeEndEventListener(sEventType, fnHandler, false);
            }else if(oDom.detachEvent){
                oDom.detachEvent('on' + sEventType, fnHandler);
            }else{
                oDom['on' + sEventType] = null;
            }
        },
        // 获取事件对象
        getEvent: function (event) {
            return event ? event : window.event;
        },
        // 获取事件目标元素
        getTarget: function(event){
            return event.target || event.srcElement;
        },
        // 阻止默认事件
        preventDefault: function(event){
            if(event.preventDefault){
                event.preventDefault();
            }else{
                event.returnValue = false;
            }
        },
        // 阻止事件冒泡
        stopPropagation: function(event){
            if(event.stopPropagation){
                event.stopPropagation();
            }else{
                event.cancelBubble = true;
            }
        }
    }