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. 洛谷2591BZOJ2298 problem a题解

    题目连接 bz链接 我们发现,如果一个人有ai个分数比他高的人,有bi个分数比他低的人 那么按照分数排序后,区间[ai+1,n-bi]中的人分数便是相同的 这样就将一个人转化为一个区间 也许有很多人的 ...

  2. 提取网址的python练习

    import urllib, urllib2, cookielib from HTMLParser import HTMLParser import sys reload(sys) sys.setde ...

  3. MaxCompute 图计算用户手册(上)

    概要 ODPS GRAPH是一套面向迭代的图计算处理框架.图计算作业使用图进行建模,图由点(Vertex)和边(Edge)组成,点和边包含权值(Value),ODPS GRAPH支持下述图编辑操作: ...

  4. VSCode 设置 CPP 代码风格

    VSCode 设置 CPP 代码风格 按 Ctrl+, 打开设置,输入 format 找到. { BasedOnStyle: Google, IndentWidth: 4 }

  5. 2019-7-22-Roslyn-获得-sln-文件所在的文件夹

    title author date CreateTime categories Roslyn 获得 sln 文件所在的文件夹 lindexi 2019-07-22 08:57:14 +0800 201 ...

  6. ModuleNotFoundError: No module named 'tools.nnwrap' pytorch 安装

    https://pytorch.org/get-started/locally/ pytorch 主页选择后安装

  7. Hadoop入门进阶步步高(三)-配置Hadoop

    三.配置Hadoop 1.设置$HADOOP_HOME/conf/hadoop-env.sh 这个文件里设置的是Hadoop运行时须要的环境变量,在1.2.1版中共同拥有19个环境变量.例如以下:   ...

  8. @loj - 2483@「CEOI2017」Building Bridges

    目录 @desription@ @solution@ @accepted code@ @details@ @another solution@ @another code@ @desription@ ...

  9. Postman使用入门

    https://jingyan.baidu.com/article/0f5fb09907e3046d8334ea2f.html Postman测试管理的单位是测试集(Collections),测试集内 ...

  10. 在ThinkPHP中,if标签和比较标签对于变量的比较。

    在TP模板语言中.if和eq都可以用于变量的比较. <比较标签 name="变量" value="值">内容</比较标签> 比如: &l ...