互动:一个闭包引发的错误

今天封装了一个兼容ie的通用事件处理程序,废话不多说,上代码。

var EventHandler = {
    addEventListener:function(ele,type,callback){
        if(ele.addEventListener){
            EventHandler.addEventListener = function(){
                ele.addEventListener(type,callback,false)
            }
        }else if(ele.attachEvent){
            EventHandler.attachEvent = function(){
                ele.attachEvent('on'+type,callback)
            }
        }else{
            ele['on'+type]=callback
        }
        EventHandler.addEventListener(ele,type,callback)
    },
   ...//其他代码,隐藏了其他跟本博文无关的方法。
}

上面对addEventListener进行了兼容封装和惰性载入。
然而在用的时候却发现了一个奇怪的问题:

EventHandler.addEventListener(document,'click',function(){
  console.log('1')
})
EventHandler.addEventListener(document,'click',function(){
  console.log('2')
})

上述代码给document绑定了两个点击事件,分别输出1、2。然而在实际运行中,却发现只输出了1,没有输出2!
为什么呢?暂且让你们思考下~提示:闭包!!
//尴尬。。没人留言。。
EventHandler.addEventListener = function(){
ele.addEventListener(type,callback,false)
}
此处产生了闭包。type,callback变量均引用了第一次调用的变量。而dom中给一个element绑定多个相同的函数事件时,只会触发一次。修正方法:

var EventHandler = {
    addEventListener:function(ele,type,callback){
        if(ele.addEventListener){
            EventHandler.addEventListener = function(ele,type,callback){
                ele.addEventListener(type,callback,false)
            }
        }else if(ele.attachEvent){
            EventHandler.attachEvent = function(ele,type,callback){
                ele.attachEvent('on'+type,callback)
            }
        }else{
            ele['on'+type]=callback
        }
        EventHandler.addEventListener(ele,type,callback)
    },
   ...//其他代码,隐藏了其他跟本博文无关的方法。
}

你可能感兴趣的:(互动:一个闭包引发的错误)