Javascript利用closure循环绑定事件

最新推荐文章于 2025-09-21 18:39:25 发布
原创 最新推荐文章于 2025-09-21 18:39:25 发布 · 904 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #button #function #input #html

Javascript，如何循环为一组控件绑定事件处理函数，同时还要传递参数？ 例如我有100个button，要为每个button绑定类似的处理函数，唯一不同的是传递的参数与button的序号有关。

以下代码利用了javascript的closure特征，将参数作为函数的变量传进处理函数里面。

<html>
<body>
<form>
<input id="tt1" name="tt" type="button" value="click"  />
<input id="tt2" name="tt" type="button" value="click"  />
</form>
</body>
</html>

<script>

function tt(i){
  this.clickFunc =function(){    
        this.kk = i;
        alert(this.kk);
    }
}

for (var i = 1; i <= 2; i++)
{
   var aa = document.getElementById("tt" + i);
   var kt = new tt(i);
   aa.onclick = kt.clickFunc;
} 
</script>
JavaScript在for循环中绑定事件解决事件参数不同的情况
10-26
综上所述，在JavaScript中，特别是在使用for循环绑定事件时，若要解决每个事件绑定时参数不同的问题，闭包提供了一种有效的解决方案。通过使用闭包，我们可以确保事件处理函数能够正确地引用到在循环中期望的变量值...
JavaScript的事件绑定(方便不支持js的时候)
10-26
这里需要注意的是，在绑定事件监听器时，不能再使用当前遍历的元素（比如`links[i]`），而应该使用`this`关键字来引用触发事件的元素，因为循环中的变量`i`在执行事件函数时可能已经改变。 此外，为了向后兼容，...
javascript closure 闭包 事件绑定
weixin_30770783的博客
03-25 118
先来一个基本的例子 <!-- 实现一段脚本，使得点击对应链接alert出相应的编号 --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <body> <a href='#'> 第一个链接 </a> </br> ...
JavaScript 闭包（Closure）介绍
算法小生
07-30 935
在JavaScript中，闭包是指一个函数（或函数表达式）连同其词法环境（Lexical Environment）的组合。这个词法环境包含了函数创建时所能访问的所有外部变量。简单来说，闭包让内部函数可以“记住”并访问外部函数的作用域，即使外部函数已经返回。
JavaScript 闭包(Closure)深度讲解
最新发布
2301_81253185的博客
09-21 1619
1.什么是闭包。
javascript中的闭包closure详解
程序那些事
03-02 6104
闭包closure是javascript中一个非常强大的功能。所谓闭包就是函数中的函数，内部函数可以访问外部函数的作用域范围，从而可以使用闭包来做一些比较强大的工作。 今天将会给大家详细介绍一下闭包。
JavaScript 闭包(closure)
学习笔记
07-10 438
javascript 闭包的概念
JavaScript监听事件的事件类型
2201_75867734的博客
11-09 583
鼠标经过 mouseover mouseenter。鼠标离开 mouseleave。键盘按下触发 Keydown。键盘抬起触发 Keyup。用户输入事件 input。鼠标单击 click。获得焦点 focus。
javascript必知必会之closure
u012561911的博客
04-21 276
摘要 本系列博文主要谈一些在 javascript 使用中经常会混淆的高级应用,包括: prototype, closure, scope, this关键字. 对于一个需要提高自己javascript水平的程序员,这些都是必须要掌握的. 本节主要介绍closure. Contents 摘要什么是closure执行空间(执行上下文, Execution Context)closu
Javascript中Closure及其相关概念
weixin_30289831的博客
07-10 180
我相信学过Javascript这门语言的程序员应该都对Closure这个概念有所了解，然而网上以及各种Javascript书籍里面对Closure这个概念的定义有各种说法。我本人觉得很多地方对Closure这个概念的定义都是片面的，目前看到的比较全面准确的定义应该是Wikipedia上面的定义了，但是Wikipedia上面的定义不是很好理解。 我通过网上查阅了些资料后结合Wikipedia的定义...
关于js for循环click事件，闭包问题
羽落花开的博客
01-02 1442
"en"> "utf-8"> "text/javascript"> function onMyLoad(){ var arr = document.getElementsByTagName("p"); for(var i = 0; i ){
JS 循环li添加点击事件 （闭包的应用）
10-20
本文主要讲述了在JavaScript中循环一个包含多个列表项（li元素）的元素集合，并给每个li元素绑定点击事件处理器的过程。在这一过程中，闭包被用于保持循环中每个元素的独立状态，这对于实现点击事件的预期行为至关...
JavaScript语言学习教程.zip
07-16
事件是网页交互的基础，文档可能会讲解如何绑定事件处理器，以及事件流的工作原理和事件对象的使用方法。 面向对象编程（OOP）是现代编程语言的重要特征，JavaScript通过原型链（prototype chain）实现OOP特性。...
clientHeight vs. offsetHeight
Coding是人生最惬意的事情
10-21 4489
许多文章已经介绍了clientHeight和offsetHeight的区别，就是clientHeight的值不包括scrollbar的高度，而offsetHeight的值包括了scrollbar的高度。然而，clientHeight和offsetHeight的值到底由什么组成的呢？如何计算这两个数的值？1. clientHeight和offsetHeight的值由什么决定？假如我们有以下的
AJAX.NET:CascadingDropDown的几点注意
Coding是人生最惬意的事情
08-19 1551
按照AJAX.NET教程提供的步骤，虽然很快就能得到结果。但如果不小心对案例改动了一些地方，就很容易使整个案例无法正常显示。这些小小的改动，在很多时候，是很难注意到其影响的。(1) Web Method的签名一定不能修改public CascadingDropDownNameValue[] GetDropDownContents(string knownCategoryValues, stri
Memory Leak of IE (Javascript)
Coding是人生最惬意的事情
08-31 1171
Circular Reference   function SetupLeak()   {            myGlobalObject = document.getElementById("LeakedDiv");            document.getElementById("LeakedDiv").expandoProperty = myGlobalObject;   }
Javascript在IE和Firefox下的兼容
Coding是人生最惬意的事情
08-31 1133
  (1) 不要使用document.all.ID来访问页面上的元素，应该改用document.getElementById(ID)     Tip:             In VS2005, if you want to "replace document.all.ID." with "document.getElementById(ID)."          
Ajax.net使得服务器端的数据模型能够被javascript所使用
Coding是人生最惬意的事情
09-12 941
Ajax.net机制使得服务器端的数据模型（即类及其之间的关系）能够被客户端的javascript所使用。而且通过Ajax.net，即使是使用了抽象机制和继承机制的类也能够被客户端的javascript所调用。以下我们通过测试的代码来说明如何通过Ajax.net使javascript能够访问使用了抽象和继承机制的服务器端的类。 1.声明抽象类MyClass，其中定义了字符串的数
JavaScript内存泄露模式与循环引用解析
然而，在实际开发过程中，尤其是在处理复杂的DOM操作与事件绑定时，极易因不当的代码结构引发内存泄漏问题，严重影响Web应用的性能与用户体验。本文由IBM印度的系统软件工程师Abhijeet Bhattacharya与Kiran ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值