js实现兼容性事件绑定函数

事件分为dom0级事件和dom2级事件,html事件处理。
1.html事件处理

<input type="button" vlaue="点我" onclick = "clickbtn();"/>

上面这种形式就称为html事件处理，将时间耦合在html中不推荐使用。不符合前端规范。
2.dom0级事件处理

btn.onclick = function(){//btn为dom元素
    //todo ...
}

上面为dom0级事件处理，直接将函数赋值给事件本身，兼容老版本浏览器，缺点绑定给同一事件绑定多个函数时，后面的会覆盖前面的。

btn.onclick = fun1;
btn.onclick = fun2;//点击按钮执行fun2而不是fun1或者两个都执行。

3.dom2级事件
dom2级事件定义了2个绑定和删除事件的方法addEventListener() 和removeEventListener()，这个克服了前两个方法的确定。

IE事件处理程序兼容 绑定事件使用 attachEvent()删除事件使用 detachEvent()

实现一个兼容所有浏览器的事件处理模块

var eventUtil = {
    /**
    element => dom元素
    type =>   事件类型  前面没有'on'
    handler =>  事件处理函数
    **/
    addEvent:function(element,type,handler){
        if(element.addEventListener)
        {
            element.addEventListener(type,handler,false);//第三个参数事件流参数，设为false,为事件冒泡
        }
        else if(element.attachEvent)//兼容ie
        {
            element.attachEvent("on" + type,handler);
        }
        else{//兼容老式浏览器
            element['on' + type] = handler;
        }
    },
    removeEvent:function(element,type,handler)
    {
        if(element.removeEventListener)
        {
            element.removeEventListener(type,handler,false);
        }
        else if(element.attachEvent)
        {
            element.detachEvent('on' + type,handler);
        }
        else
        {
            element.['on'+type] = null;
        }
    },
    getEvent:function(e){//获取事件对象
        e = e || window.event;//window.event兼容ie
        return e;
    },
    getType:function(event){
        return event.type;
    },
    getElement:function(event)
    {
        return event.target || event.srcElement;//兼容ie
    },
    preventDefault:function(event)
    {
        if(event.preventDefault)
        {
            event.preventDefault();
        }
        else{
            event.returnValue = false;//兼容ie
        }
    },
    stopPropagattion:function(event){
        if(event.stopPropagation)
        {
            event.stopPropagation();
        }
        else
        {
            event.cancelBubble = true;兼容ie
        }
    }
}

最后说一下事件流，事件流分为事件冒泡和事件捕获。

事件冒泡：事件最开始有最具体的元素接收，然后逐次向上传播，至文档节点。通俗点说先子后父。
时间捕获：事件最先在最外层触发，然后依次向内传播，通俗点说先父后子。