js中点击事件可能产生的闭包

原创 2016年12月17日 16:52:50

相信很多同学在写js的时候都遇到过闭包的问题,让我们先来看一个背景介绍,
这里写图片描述

有这样一组按钮,可能是成千上万个,他们需要一个点击事件来处理不同的情况,最暴力的办法是为每个按钮绑定一个事件,但这显然不是最佳的方法。那么最佳的方法是什么呢?假如他们每个按钮都有一个序号(我将这些按钮的id以升序排列,并存放在数组click_pops中,对应的button的id即为’#’+click_pops[i]),那么有人可能想对序号排序,然后对每个按钮添加绑定事件,大概是这样

for(var i = 0; i < click_pops.length; i ++){
    $('#'+click_pops[i]).on('click',function(e){
        toItsOwnFunc(i);
    })
}

可是这样真的可以嘛?不妨一试,你会看到这并不会像想象中的那样为每个按钮添加点击事件,这个问题的解答主要是由于ES5的作用域的问题,当进行过这层循环后,i的最终值为click_pops.length,所以只有#click_pops[click_pops.length]才绑定了点击事件,如果你仔细并理解了闭包,那么你可能就会有以下的想法了

for(var i = 0; i < click_pops.length; i ++){
    $('#'+click_pops[i]).on('click',(function(i){
        return function(){
            toItsOwnFunc(i);
        }
    })(i))
}

这里就是用了闭包做了处理了,我们传入一个局部变量i,这样使得每次都是真的在为第i个元素绑定事件。

说到绑定事件,原生的绑定事件是这样的

function addEvent(obj,type,handle){
   try{  // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
        obj.addEventListener(type,handle,false);
    }catch(e){
        try{  // IE8.0及其以下版本
            obj.attachEvent('on' + type,handle);
        }catch(e){  // 早期浏览器
            obj['on' + type] = handle;
        }
    }
}

使用闭包为相似元素添加点击事件

闭包为相似元素添加点击事件
  • xuexizhe88
  • xuexizhe88
  • 2017年02月07日 11:43
  • 321

javaScript中onclick函数循环事件时闭包的影响

for (var i=0;iaa.length;i++) { aa[i].onclick = (function (i) { return function ...
  • NOT_GUY
  • NOT_GUY
  • 2017年02月27日 21:30
  • 503

JS闭包导致循环给按钮添加事件时总是执行最后一个

今天再做需求时有一个功能是这样的,就是有不定个的按钮,且点击按钮时都需要执行一个方法(参数不一样) 那么我很自然的就想到了,循环给每个按钮添加事件和参数就好了,由于不方便上传系统代码,下面以一个简单...
  • xiaozji
  • xiaozji
  • 2015年02月05日 17:17
  • 14743

利用闭包实现onclick事件传递参数

当触发点击事件,一个简单的例子。 闭包创建数组 window.onload = function (){ var lis = d...
  • yxwb1253587469
  • yxwb1253587469
  • 2016年11月19日 14:56
  • 1668

js中点击事件可能产生的闭包

相信很多同学在写js的时候都遇到过闭包的问题,让我们先来看一个背景介绍, 有这样一组按钮,可能是成千上万个,他们需要一个点击事件来处理不同的情况,最暴力的办法是为每个按钮绑定一个事件,但这显然不是最...
  • viciousDear
  • viciousDear
  • 2016年12月17日 16:52
  • 1337

百度地图API详解之事件机制,闭包机制,marker事件,信息窗口,叠加层

  • 2012年11月24日 11:17
  • 876KB
  • 下载

每日一算法:可能产生的集合

#include char str[] = "abcdefghijklmnopqrstuvwxyz"; void print_subset(int n , int s) { i...
  • qq523176585
  • qq523176585
  • 2013年11月11日 15:48
  • 460

每日一算法:产生可能的集合(二)

产生可能的集合 说明 给定一组数字或符号,产生所有可能的集合(包括空集合),例如给定1 2 3, 则可能的集合为:{}、{1}、{1,2}、{1,2,3}、{1,3}、{2}、{2,3}、{3}...
  • qq523176585
  • qq523176585
  • 2013年11月03日 09:24
  • 616

JavaScript绑定事件时的闭包问题

在写网页的时候,我们经常需要为一组DOM元素绑定同一事件,比如页面上有3个div,我们给他们绑定一个click事件来alert数组letters中和他们序号对应的字母:        function...
  • greymouseyu
  • greymouseyu
  • 2009年05月26日 20:33
  • 1692

js事件参数和闭包

首先做事件参数 我们经常这样写   a.onload = function(){alert("df")); 这是不带参数的写法 如果带参数 a.onload= function(i){al...
  • zb219
  • zb219
  • 2012年05月25日 15:31
  • 3396
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js中点击事件可能产生的闭包
举报原因:
原因补充:

(最多只允许输入30个字)