美文网首页
互动:一个闭包引发的错误

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

作者: David三人行 | 来源:发表于2017-03-16 21:27 被阅读23次

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

相关文章

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

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

  • 学习JS笔记(第七章-闭包,作用域)

    闭包的概念## 闭包实例## 数据传递更加灵活### 常见错误之循环闭包### 封装变量### 闭包小结## 作用...

  • 闭包

    1.观察闭包 闭包:必须结合函数观察闭包。 错误信息:Uncaught ReferenceError: inner...

  • (9) python之闭包

    闭包闭包 = 函数 + 环境变量(函数定义的时候) 一个最简单的闭包 闭包不受外部变量影响 非闭包 闭包 闭包 只...

  • js 闭包实现单例模式

    在学习闭包的时候,想看看闭包如何来实现一个单例模式,可是发现网上百度出来的基本上用闭包实现的单例模式都是错误的,大...

  • Swift-进阶 :闭包(二)逃逸闭包 & 非逃逸闭包

    本文主要分析逃逸闭包 、非逃逸闭包、自动闭包 逃逸闭包 & 非逃逸闭包 逃逸闭包定义 当闭包作为一个实际参数传递给...

  • Escaping Closures - Swift

    逃逸闭包和非逃逸闭包 逃逸闭包(escaping closure),什么是逃逸闭包?苹果官方给的定义是:当一个闭包...

  • 闭包与setTimeout

    闭包 闭包的作用: 闭包的本质是一个函数闭包可以访问函数内部变量闭包的存在会使内部变量保留在内存中闭包的应用: 模...

  • swift-闭包

    闭包 闭包定义 闭包简化 - 尾随闭包 闭包参数 闭包返回值 闭包的循环引用

  • Swift-08:闭包

    1.分析闭包以及闭包捕获变量的原理2.逃逸闭包 & 非逃逸闭包 一、闭包 闭包是一个捕获了全局上下文的常量或者变量...

网友评论

      本文标题:互动:一个闭包引发的错误

      本文链接:https://www.haomeiwen.com/subject/yvcsnttx.html