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

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

  • 发布时间:
  • 作者:码农之家原创
  • 点击:174

这篇文章主要知识点是关于javascript、绑定事件、闭包、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

21天学通HTML+CSS+JavaScript Web开发
  • 类型:前端大小:104.9 MB格式:PDF作者:劳拉 莱梅
立即下载

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>

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

推荐内容

IntelliJ IDEA 注册码(激活到2089年)

idea2020注册激活码(激活到2100年)

实例分析Java实现的zip压缩及解压缩工具类

python3 pandas 如何读取MySQL数据和插入

ThinkPHP3.2.3框架如何实现分页功能

展开 +

收起 -

javascript 相关电子书
学习笔记
网友NO.624000

对Python闭包与延迟绑定的方法详解

Python闭包可能会在面试或者是工作中经常碰到,而提到Python的延迟绑定,肯定就离不开闭包的理解,今天总结下 关于闭包的概念以及一个延迟绑定的面试题。 Python闭包 1、什么是闭包,闭包必须满足以下3个条件: 必须是一个嵌套的函数。 闭包必须返回嵌套函数。 嵌套函数必须引用一个外部的非全局的局部自由变量。 举个栗子 # 嵌套函数但不是闭包def nested(): def nst(): print('i am nested func %s' % nested.__name__) nst()# 闭包函数def closure(): var = 'hello world' # 非全局局部变量 def cloe(): print(var) # 引用var return cloe # 返回内部函数cl = closure()cl() 2、闭包优点 避免使用全局变量 可以提供部分数据的隐藏 可以提供更优雅的面向对象实现 优点1,2 就不说了,很容易理解,关于第三个,例如当在一个类中实现的方法很少时,或者仅有一个方法时,就可以选择使用闭包。 举个栗……

网友NO.737897

JS获取动态添加元素的方法详解

本文实例讲述了JS获取动态添加元素的方法。分享给大家供大家参考,具体如下: 在页面的渲染中,我们经常用遇到动态添加的DOM元素,那么在获取这些元素的时候或则为这些DOM元素的时候,我们有下面三种处理方法: 1. 在模板引擎里面添加行内事件 2. 利用事件的委托获取(常用) 3. 在ajax的监听响应完成函数后面获取 一 在模板引擎里面添加行内事件 添加行内事件就是在标签里面添加事件,这样就可以直接获取到动态添加的元素. !-- 1.准备一个模板 -- script id="tpl-table" type="text/html" {{ each rows value key }} tr td button type="button" onclick="updateUser({{ value.id }} {{@ ','}} {{value.isDelete}})" id="btn-status" 按钮/button /td /tr {{ /each }} /script //事件函数,书写在单独的JS文件中 //带有参数,参数是模板传递过来的 function updateUser (id,isDelete){ //doSomething......... } 上面使用的模板是art-template,在模板……

网友NO.980184

JS求Number类型数组中最大元素方法

如何使用JS,在一个Number类型的数组里,查找最大(或最小)数呢? 以下介绍四个方法。 1. 不使用任何库函数 代码如下: function findMax1 (arr) { let result = 0; if (Array.isArray(arr)) { for (let i = 0; i arr.length; i++) { result = arr[i] result ? arr[i] : result; } return result; } else { console.error('The parameter arr is not an array'); return; }} 解释: 利用一个变量result来存储最大值。遍历待查找的数组,如果当前遍历的元素大于result,就把这个元素赋值给result。 2. 利用Array.reduce() 代码如下: function findMax2 (arr) { let result = 0; if (Array.isArray(arr)) { result = arr.reduce((a, b) = { return a b ? a : b; }, 0); return result; } else { console.error('The parameter arr is not an array'); return; }} 解释: reduce方法就是通过一个函数,针对一个累加器(accumulator)和数组中的每一个元素,将一个数组最终减少到一个值。 reduce接受两个参数:……

网友NO.544631

JS中去掉array中重复元素的方法

今天看了廖雪峰的js教程,看到了filter的用法。 其中用它来实现去除Array中重复元素的方法在这里记录下来。 Filter filter是一个常用的操作,它用于把Array的某些元素过滤掉,然后返回剩下的元素。 和map()类似,Array的filter()也接收一个函数。和map()不同的是,filter()把传入的函数依次作用于每个元素,然后根据返回值是true还是false决定保留还是丢弃该元素。 利用filter,可以巧妙地去除Array的重复元素: 'use strict';var r, arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry']; r = arr.filter(function (element, index, self) { return self.indexOf(element) === index;}); 因为Array中的indexOf总是返回第一次出现某一个元素的位置,后续的重复元素位置与indexOf返回的位置不相等,因此被filter滤掉了。 以上所述是小编给大家介绍的JS中去掉array中重复元素的方法,希望对大家……

<
1
>

电子书 编程教程 文档 软件 源码 视频

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757