Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >for 循环中实现多个点击事件 原

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

作者头像
tianyawhl
发布于 2019-04-04 08:38:54
发布于 2019-04-04 08:38:54
8990
举报
文章被收录于专栏:前端之攻略前端之攻略

<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.onload=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.onclick=function(){alert("Button"+arg);};     })(i);     }   }   window.onload=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>

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2016/08/25 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
JavaScript闭包及实现循环绑定事件
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
奋飛
2019/08/15
9450
了解 JS 作用域与作用域链
不在任何函数内声明的变量(函数内省略var的也算全局)称作全局变量(global scope)
书童小二
2018/09/03
2.1K0
JavaScript 各种事件触发总结
鼠标 Click: 鼠标在一个对象上左键点击触发Click事件,对象包括button,document,checkbox,link,radio,submit.
王瑞MVP
2022/12/28
4K0
BOM和DOM
  到目前为止,我们已经学过了JavaScript的一些简单的语法。但是这些简单的语法,并没有和浏览器有任何交互。
changxin7
2022/05/06
5740
BOM和DOM
Web前端基础(06)
###JavaScript中对象分类 内置对象: number/string/boolean等 浏览器相关对象BOM: Browser Object Model浏览器对象模型 页面相关对象DOM: Document Object Model文档对象模型 ###BOM浏览器相关内容 window: 该对象的属性和方法称为全局属性和全局方法,访问时可以省略掉window. window中常见的方法: window.isNaN() 判断变量是否是NaN window.alert() 弹出提示框 window.c
海拥
2021/08/23
2.8K0
【如果你要学JS {十一}】——window常见事件,灵活运用定时器
BOM ( Browser Object Model )即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心 对象是window,BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。 BOM缺乏标准, JavaScript 语法的标准化组织是ECMA , DOM的标准化组织是W3C , BOM最初是Netscape浏 览器标准的一部分。
像素人
2023/12/24
1.1K0
【如果你要学JS {十一}】——window常见事件,灵活运用定时器
BOM
​ BOM(Browser Object Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是 window。
梨涡浅笑
2022/05/08
1.4K0
BOM
BOM
BOM(Browser Object Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是 window。
星辰_大海
2020/09/30
1.4K0
Js BOM
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
hss
2022/02/25
8370
BOM概述
在上一篇文章中我们学习了DOM,接下来让我们先通过和DOM的对比来简单了解一下BOM
秋落雨微凉
2022/10/25
1.2K0
BOM概述
定时器
var timer=setInterval(函数,毫秒); 重复执行 clearInterval(timer); 清空定时器
河湾欢儿
2018/09/06
3.1K0
js对象(BOM部分/DOM部分)
JS总体包括ECMAScript,DOM,BOM三个部分,但是能够和浏览器进行交互的只有DOM和BOM,那么到底什么是DOM和BOM呢
全栈程序员站长
2022/07/21
4.4K0
js对象(BOM部分/DOM部分)
JS基础第三课(定时器篇)
(1)概念:回调函数其实是一个参数,将这个函数作为参数传到别的函数里面,回调函数是最后执行的
申小兮
2023/04/14
2.1K0
JS基础第三课(定时器篇)
JavaScript基础
使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数,这样当事件被触发时,响应函数将会按照函数的绑定顺序执行 这个方法不支持IE8及以下的浏览器
shaoshaossm
2022/12/27
2K0
JavaScript基础
【JavaScript】JavaScript开篇基础(6)
window.onload,是窗口(页面)加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、css文件等),就调用处理函数。
E绵绵
2024/11/17
900
【JavaScript】JavaScript开篇基础(6)
BOM的介绍_BOM定义
BOM由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象。
全栈程序员站长
2022/09/20
1.3K0
BOM的介绍_BOM定义
前端之BOM和DOM
BOM和DOM简介 BOM(Browser Object Model)是指浏览器对象模型,它使JavaScript有能力与浏览器进行“对话”。 DOM(Document Object Model)是指文档对象模型,通过它,可以访问HTML文档的所有元素。 Window对象是客户端JavaScropt最高层对象之一,由于window对象是其他大部分对象的共同祖先,在调用window对象的方法和属性时,可以省略window对象的引用。例如:window.document.write()可以简写成:documen
新人小试
2018/04/12
1.7K0
前端之BOM和DOM
前端基础-浏览器对象模型
浏览器对象模型(Browser Object Model)–英文简称 BOM,浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。我们使用JavaScript与浏览器交互的所有内容,均来自 浏览器对象模型。
cwl_java
2020/03/26
4600
什么是BOM
BOM(Browser Object Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是 window。
清出于兰
2020/10/26
1.1K0
什么是BOM
前端成神之路-WebAPIs04
​ BOM(Browser Object Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是 window。
海仔
2020/12/29
1.5K0
相关推荐
JavaScript闭包及实现循环绑定事件
更多 >
领券
💥开发者 MCP广场重磅上线!
精选全网热门MCP server,让你的AI更好用 🚀
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档