js中的事件绑定

事件模块:
1. 事件绑定的方式:
    <1>DOM.on事件名 = function(){}===>无兼容性
    <2>DOM.addEventListener(事件名,function(){})===> IE8不支持
    IE8:DOM.attachEvent(on事件名,function(){})
    
2. off事件移除
    <1>.DOM.on事件名=null ===>无兼容性
    <2>.DOM.removeEventListener(事件名,绑定什么函数,就得出入什么函数)===>IE8不支持
    IE8:DOM.detachEvent(on事件名,function(){})

  var span = document.querySelector('span')
    //标准方式
    var clickHandle = function () {
        alert('点击pan')
    }
    span.addEventListener("click", clickHandle)
    
    //IE8方式
    span.attachEvent('onclick',clickHandle)
    
    //兼容方式
    function addEvent(elem,type,fn){
        if(elem.addEventListener){
            elem.addEventListener(type,fn)
        }else {
            elem.attachEvent('on'+type,fn)
        }
    }
    
    addEvent(span,'click', clickHandle)

    //事件移除
    //标准方式移除
    span.removeEventListener('click',clickHandle)

    //IE8方式移除
    span.detachEvent('onclick',clickHandle)

    //事件兼容处理
    function  removeEvent(elem,type,fn){
        if(elem.removeEventListener){
            elem.removeEventListener(type,fn)
        }else {
            elem.detachEvent(type,fn)
        }
    }

    removeEvent(span,'click',clickHandle)