HTML代码:

<button type='button' class='btn' id='1'>按钮1</button>
<button type='button' class='btn' id='2'>按钮1</button>
<button type='button' class='btn' id='3'>按钮1</button>
<button type='button' class='btn' id='4'>按钮1</button>

JS代码:

var btn = document.querySelectorAll('.btn');

for(var i =0; i<btn.length; i++)
{
((i)=>{
btn[i].onclick = ()=>{
aleter('我是按钮'+btn[i].getAttribute('id'));
};
})(i);
}

JS闭包机制实现为DOM元素循环添加事件的更多相关文章

  1. JS给元素循环添加事件的问题

    <ul> <li>男</li> <li>女</li> <li>老</li> <li>少</li&g ...

  2. 如何在通过knockout数据绑定的DOM元素上添加事件

    通过knockout数据绑定的DOM元素,通过chrome控制台打断点知道,DOM元素会被暂时隐藏,使用document.querySelector()是获取不到的,会显示null,直到数据绑定完成才 ...

  3. dom元素循环绑定事件的技巧

    以前总觉得自己写的代码不太规范,尤其是写原生的时候.举个例子: 要为页面上所有".a"的元素绑定事件,当然了用jquery很方便:$('.a').bind("click& ...

  4. 【特效】给元素循环添加class

    经常会遇到给元素循环添加class的效果,例如下面这个图 每个模块的背景色和图标都不相同,但是呢,模块的数量又不确定,说不定有几十个,那我不能设计几十个图标吧,所以,可以做成每9个一循环,也就是第10 ...

  5. JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;

    JavaScript Dom基础 学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...

  6. event.target 属性返回哪个 DOM 元素触发了事件。

    <ul> <li>list <strong>item 1</strong></li> <li><span>list ...

  7. react快速上手一(使用js语法,创建虚拟DOM元素)

    1.装包,引包 首先需要安装两个包 react ,react-dom cnpm i react react-dom 介绍下这两个包: react:专门用来创建React组件,组件生命周期等这些东西. ...

  8. JS数组方法汇总 array数组元素的添加和删除

    js数组元素的添加和删除一直比较迷惑,今天终于找到详细说明的资料了,先给个我测试的代码^-^ var arr = new Array(); arr[0] = "aaa"; arr[ ...

  9. js循环添加事件的问题

    1.需求 给下面每个按钮增加事件 <ul id="list"> <li>按钮1</li> <li>按钮2</li> &l ...

随机推荐

  1. Myeclipse运行提示错误: 找不到或无法加载主类 test.test1 终极解决办法

    前提是代码没有问题 简单粗暴的解决办法: 重启电脑 解决办法2: 1.在控制台中点开“Problems”,查看里面的错误.如果是多个项目,可以将其他项目暂时关闭. 根据错误进行处理. 2.把项目cle ...

  2. iOS 适配iPhoneX上tableHeaderView发生了高度拉伸、UI出现的空白间距

    记录下前阵子遇到的一个问题,草稿箱里记录的有点潦草,讲下大概吧. 异常如下,粉色区域作为tableHeader放上去的(注意不是sectionHeader) header初始化之后一切正常,frame ...

  3. 洛谷3067 BZOJ 2679题解(折半搜索)

    传送门 BZOJ传送门(权限题) 看到n小于20,就可以想到搜索 所有的数要么在集合a中,要么在集合b中,要么都不在 可是3^n复杂度会炸,我们考虑优化 可以利用折半搜索,将前面一半的所有可能情况与后 ...

  4. ELK2之ELK的语法学习

    1.回顾 (1)es是什么? es是基于Apache Lucene的开源分布式(全文)搜索引擎,提供简单的RESTful API来隐藏Lucene的复杂性. es除了全文搜索引擎之外,还可以这样描述它 ...

  5. 最短路-SPAF模板

    以hdu1874畅通工程续为例 #include<iostream> #include<cstring> #include<cstdio> #include< ...

  6. 第三期 行为规划——11.在C ++中实现第二个成本函数

    在大多数情况下,单一成本函数不足以产生复杂的车辆行为.在这个测验中,我们希望您在C ++中实现更多的成本函数.我们稍后会在本课中使用这两个C ++成本函数.这个测验的目标是创建一个成本函数,使车辆在最 ...

  7. behavior planning——12.example cost funtion -lane change penalty

      In the image above, the blue self driving car (bottom left) is trying to get to the goal (gold sta ...

  8. Android 设置TextView字体颜色

    设置TextView字体的颜色其实很简单,尤其是直接在XML文件中,可以直接通过textColor属性指定颜色值,达到设置文本颜色的效果:那在代码中如何动态设置字体的颜色值呢? 接下来,介绍如何通过J ...

  9. SuperSocket 中的日志系统

    当 SuperSocket boostrap 启动时,日志系统将会自动启动. 所以你无须创建自己的日志工具,最好直接使用SuperSocket内置的日志功能. SuperSocket 默认使用log4 ...

  10. 小程序clearinterval无效解决

    小程序clearinterval无效解决 小程序clearinterval清除定时器无效,原因是定时器使用与清除方法不对导致的,我们应将定时器绑定变量,这样在关闭页面清空定时器clearinterva ...