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)
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容