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

当触发点击事件，一个简单的例子。

<!DOCTYPE html>
<html>
<head><title>闭包创建数组</title><meta charset="utf-8"><script type="text/javascript">window.onload = function (){var lis = document.getElementsByTagName('li');for (var i = 0; i < lis.length; i++) {lis[i].onclick = function () {console.log(this.innerHTML);};}}</script>
</head>
<body><h2>闭包点击事件</h2><ul><li>奔驰</li><li>宝马</li><li>奥迪</li></ul>
</body>
</html>

但是，当我想要得到循环外的变量值。

<!DOCTYPE html>
<html>
<head><title>闭包创建数组</title><meta charset="utf-8"><script type="text/javascript">window.onload = function (){var lis = document.getElementsByTagName('li');var price = [1, 10, 100];for (var i = 0; i < lis.length; i++) {lis[i].onclick = function () {console.log(this.innerHTML+ '的价格:' + price[i]);};}}</script>
</head>
<body><h2>闭包点击事件</h2><ul><li>奔驰</li><li>宝马</li><li>奥迪</li></ul>
</body>
</html>

由于当我点击的时候，i的值已经是3了，所以会undefined。现在的问题就是怎么才能在每次循环中把i的值保存下来。

<!DOCTYPE html>
<html>
<head><title>闭包创建数组</title><meta charset="utf-8"><script type="text/javascript">window.onload = function (){var lis = document.getElementsByTagName('li');var price = [1, 10, 100];for (var i = 0; i < lis.length; i++) {lis[i].onclick = (function (n) {console.log("i:"+i+";n:"+n);return function () {console.log(this.innerHTML+ '的价格:' + price[n]);};})(i);}}</script>
</head>
<body><h2>闭包点击事件</h2><ul><li>奔驰</li><li>宝马</li><li>奥迪</li></ul>
</body>
</html>

闭包的经典回答应该是：延长局部变量的生命周期

利用闭包实现onclick事件传递参数相关推荐

JS与JQuery点击事件传递参数
我们知道JS(javascript)是一种脚本语言,用于客户端web开发,常用来给html网页添加动态功能,是客户端运行的解释性语言. JQuery是对js的封装,简化了ajax和html的一款js框 ...
微信小程序学习5：小程序语法-事件绑定之给事件传递参数
微信小程序学习5:小程序语法-事件绑定之给事件传递参数前面一讲是关于事件绑定的,下面对事件绑定进行补充. 在用户触发事件,比如点击按钮时,我们往往要传递一下参数用来识别是那个按钮,因为一个界面往往不 ...
关于javaScript注册事件传递参数的浅析
最近这半年作为一个java 程序员,我写的javaScript代码都快比java代码多了,前段时间是给某银行做一个柜员管控系统,在柜员授权这一块功能上,由于柜员的授权需要考虑各方面的因素,比如机构权限 ...
Antd-Design List渲染列中Button 点击事件传递参数
背景:使用List 渲染的后台数据列表中,点击删除按钮,可以将该项对应的主键传递给函数点击删除的时候,将该条商品记录对应的id 传递给函数,通过调用后台接口删除可以看到的是关键代码: onCli ...
Knockout 事件传递参数的方法
在Knockout中直接使用函数传递参数是不行的,会导致函数在初始化时就被调用,例如: <span style="font-size:14px;"><div da ...
如果理解Javascript利用闭包循环绑定事件
我们先看一个关于Javascript利用循环绑定事件的例子: 例如:一个不确定长度的列表,在鼠标经过某一条的时候改变背景. <!DOCTYPE html PUBLIC "-//W3C/ ...
html点击事件传参 php,HTML通过事件传递参数到js详解及实例
目标处理函数为selectAttr(test) 1.直接传递给定参数如:οnclick="selectAttr('1'); οnclick="selectAttr('a'); 2. ...
swift3 按钮触发事件_swift5.3 UIView 与 UIButton 点击事件传递参数
UIView 与 UIbutton 点击事件的参数传递:目前我通过 tag 解决了 UIButton 的点击参数传递设置 UIButton 的 tag,详细见代码let playButton = U ...
html下拉框传递参数,HTML通过事件传递参数到js详解及实例
目标处理函数为selectAttr(test) 1.直接传递给定参数如:οnclick="selectAttr('1'); οnclick="selectAttr('a'); 2. ...

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

利用闭包实现onclick事件传递参数相关推荐

最新文章

热门文章