for 循环中实现多个点击事件

2019独角兽企业重金招聘Python工程师标准>>>

<script type="text/javascript">
function buttonInit(){
for(var i=1;i<4;i++){
var b=document.getElementById("button"+i);
b.addEventListener("click",function(){ alert("Button"+i);},false);
}
}
window.οnlοad=buttonInit;
</script>
</head>
<body>
<button id="button1">Button1</button>
<button id="button2">Button2</button>
<button id="button3">Button3</button>
</body>
</html> 全部弹出button4
当注册事件结束后，i的值是4，当点击按钮时，事件函数function(){alert("button"+i)}这个匿名函数中没有i,
所有到buttonInit函数中找，此时的i为4，所有弹出button4 （但是此时确实是点击不同的按钮，只是都显示i=4）修改如下：
<script>
function buttonInit(){
for(var i=1;i<4;i++){
(function (arg) {
var b=document.getElementById("button"+i);
b.οnclick=function(){alert("Button"+arg);};
})(i);
}
}
window.οnlοad=buttonInit;
</script> js改成如上可以弹出button1 ,button2 , button3

另一个例子

for(var i=0;i<3;i++){

setTimeOut(function(){

console.log(i)

},500)

};

执行结果：3，3,3

所以上述函数应该写成：

for(var i=0;i<3;i++){

（function(i){

setTimeOut(function(){

console.log(i)

},500);

})(i);

}

另一种修改方法：把var改成let即可

for(let i=0;i<3;i++){

setTimeOut(function(){

console.log(i)

},500)

};

这种情况创建了太多的定时器，如果i值非常大，会非常消耗资源，大大降低执行性能,优化如下，始终只有一个定时器

let i = 0;
let time = setInterval(output, 1000)
function output() {
if (i < 10) {
console.log(i)
console.log(time)
i++
} else {
clearInterval(time)
}
}

如果自定义参数

let i = 0;
let time = setInterval(function() {output(8)}, 1000)
function output(num){
if (i < num) {
console.log(i)

i++
} else {
clearInterval(time)
}
}
</script>

转载于:https://my.oschina.net/u/2612473/blog/737793

for 循环中实现多个点击事件相关推荐

Android在WebView中给图片设置点击事件
好久没有更新博客了,今天来个小知识点.我们知道在WebView中加载的是Html也面,在开发中都是Web前端人员写好以后给个链接我们去用webView进行loadUrl.但是有时突然产品想让你把加载回 ...
iostext添加点击事件_iOS开发小技巧 - label中的文字添加点击事件
Label中的文字添加点击事件以前老师讲过类似的功能,自己懒得回头看了,找了很多第三方的,感觉这个小巧便利,作者只是扩展了分类,实现起来代码也少.先来个效果图自己的项目,直接上代码 - (void ...
Android中的事件处理之点击事件
在 Android 的图形界面(UI)开发中,有两个非常重要的内容∶一个是控件的布局,另个就是控件的事件处理.Android中的常用事件有点击事件.长按事件.触摸事件.焦点事件.按键事件-下拉列表的选 ...
在Vue组件中获取全局的点击事件
使用场景: 在Vue组件中点击某元素之外的地方移除该元素需求: 如上图所示,"用户列表"页面有三个Vue组件组成,分别是"菜单组件","导航组件&q ...
六十二、Js中的冒泡和捕获点击事件和Vue组件绑定原生事件
2020/10/18 . 周日.今天又是奋斗的一天. @Author:Runsen @Date:2020/10/18 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是 ...
谷歌地图中给infowindow添加点击事件
项目中想实现点击地图中marker上面的图标,即点击infowindow之后跳转到另一个界面,发现不可以像监听marker点击事件一样直接给infowindow添加点击事件.解决方法为将content ...
CefSharp向浏览器中指定DOM发送点击事件
引用 CefSharp的SendMouseClickEvent,通过此函数发送鼠标点击事件. 操作方法先借助jQuery获取指定DOM的偏移,然后发送SendMouseClickEvent完成模拟点 ...
vue中echarts纵轴添加点击事件
直接上代码 initChart () {this.ganttChart = echarts.init(document.getElementById('gantt-chart'))const _sel ...
vue中触发按钮的点击事件
主动触发点击事件由vue代码触发点击事件,实现的效果是:点击按钮,触发输入框点击事件,从而实现选择文件. 示例如下: <template><input type="fi ...
html中取消li的点击事件,jquery设置html li点击click事件为什么无法赋值到表单input value中呢？...
小弟最近在做一个项目.用到了闭包的问题,是这样的,页面中有一堆li(动态加载的),点击某一个的时候获取对应的index,然后把index赋值到input标签中的value,但是怎么都赋值不上.不知道咋 ...

for 循环中实现多个点击事件

for 循环中实现多个点击事件相关推荐

最新文章

热门文章