当前位置:主页 > javascript教程 > JS中批量给元素绑定事件过程中的相关问题使用闭包解决

JS中批量给元素绑定事件过程中的相关问题使用闭包解决详解

发布:2020-02-05 10:08:51 174


给大家整理一篇javascript相关的编程文章,网友连莹华根据主题投稿了本篇教程内容,涉及到javascript、绑定事件、闭包、JS中批量给元素绑定事件过程中的相关问题使用闭包解决相关内容,已被191网友关注,涉猎到的知识点内容可以在下方电子书获得。

JS中批量给元素绑定事件过程中的相关问题使用闭包解决

在JS中,你写一个for循环的时候,内部的循环变量I其实是会保存在它运行的函数或类内的,所以你会发现你给元素批量绑定事件的时候,出现i=最后一个循环变量的值,这就很坑爹啊,解决的方案有2钟,
思路就是:把这个循环变量保存起来,不要让它的作用域在整个函数,而是在循环体内

1.使用闭包(如果你不懂闭包,请打开百度:www.baidu.com)
2.使用with关键字,with语法是with( obj ) { //使得可以在此直接访问obj的属性,而不用加obj.XXX }
代码示例:
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script type="text/javascript" src="jquery-1.7.2.js" ></script>
<script type="text/javascript" language="javascript">
$(document).ready(function (){
function Ev(i){
this.index = i;
this.click = function (){
alert(this.index );
}
}
for(var k=1; k<4; k++){
//闭包函数1
// (function(x){
// $("#div" + x).click(function(){
// f(x);
// });
// }(k));
//使用with关键字
with ({i: k}){
$("#div" + i).click(function(){
f(i);
});
}
}
var f = function (m){
alert(m);
}
});
</script>
</head>
<body>
<div id="div1">1
</div>
<div id="div2">2
</div>
<div id="div3">3
</div>
</body>
</html>

参考资料

相关文章

  • JavaScript输出所选择起始与结束日期的实例代码

    发布:2019-08-02

    这篇文章主要介绍了JavaScript输出所选择起始与结束日期的方法,涉及javascript结合HTML5元素操作日期运算的相关实现技巧,需要的朋友可以参考下


  • JS布尔对象的toString() valueOf()使用用法

    发布:2020-02-03

    这篇文章主要介绍了JS的布尔对象的toString()方法和valueOf()方法,是JavaScript入门学习中的基础知识,需要的朋友可以参考下


  • 怎样使用JavaScript中的setUTCDate()方法

    发布:2020-02-11

    这篇文章主要介绍了JavaScript中的setUTCDate()方法使用详解,是JS入门学习中的基础知识,需要的朋友可以参考下


  • JavaScript中Promise使用

    发布:2020-01-27

    Promise,相信每一个前端工程师都或多或少地在项目中都是用过,毕竟它早已不是一个新名词。ES6中已经原生对它加以支持,在caniuse中搜索一下 Promise ,发现新版的chrome和firefox也已经支持。但是


  • 总结JavaScript设计模式编程中的享元模式使用

    发布:2022-07-07

    为网友们分享了关于JavaScript的教程,享元模式最适合于解决因创建大量类似对象而累及性能的问题,本文将来总结JavaScript设计模式编程中的享元模式使用,包括在DOM操作时的利用示例:


  • JavaScript中Array的用法及实例内容

    发布:2021-06-16

    string和array作为javascript内置对象,其中许多方法无论是在开发过程中,还是在面试的时候都有机会被面试官问到,下面这篇文章主要给大家介绍了关于JavaScript中Array方法你该知道的正确打开方法,


  • JavaScript基本语法简单总结

    发布:2020-01-21

    这篇文章主要介绍了JavaScript基本语法,适合刚入门的同学,有兴趣的可以了解下。


  • javascript之onbeforeunload、onunload事件详解

    发布:2020-03-21

    javascript中onbeforeunload与onunload事件就是页面加载前与页面关闭时的两个功能的函数,可以防止页面刷新时给提示再刷新或页面关闭时给出提示,下面我来介绍onbeforeunload与onunload事件用法。


网友讨论