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

今天封装了一个兼容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)
    },
   ...//其他代码，隐藏了其他跟本博文无关的方法。
}

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

推荐阅读更多精彩内容