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. 神舟mini pcs-b wifi-bt 驱动

    最新mini pcs ssd硬盘版 安装win10后蓝牙设备找不到,显示usb获取设备符失败, 卸载wifi驱动,安装以下驱动,两个链接应该都可以. TW: https://downloadcente ...

  2. UVA_489:Hangman Judge

    Language:C++ 4.8.2 #include<stdio.h> #include<string.h> int main(void) { ]; ]; ]; ]; // ...

  3. COGS-2638 区间与,异或,询问max

    本篇题解参考了这个博客 题目链接 我们利用线段树来维护区间第最大值,考虑如何修改 每一次进行与操作时只有z的二进制为0的位会产生影响 每一次进行或操作时只有z的二进制为1的位会产生影响 所以只要该区间 ...

  4. python 自动登录网页

    语言:python 浏览器:chrome 工具:chrome控制台 #!/usr/bin/python # coding: GBK import urllib,urllib2,httplib,cook ...

  5. javascript中json对象与字符串互转及取值

    一.   json字符串转换为javascript对象,并取值 var answer = '{"id":0}' var value= JSON.parse(answer); //转 ...

  6. uda 1.C++ 函数

    函数:Python vs C++ 在 Python 和 C++ 中,函数的作用相同:函数把语句组合在一起,执行某种任务.函数可以帮助你避免重复地复制和粘贴相同的代码. 函数编写的语法有些不同,主要有三 ...

  7. Python深入:super函数

    新式类中最酷的,或者也是最不平常的特性之一,可能就是编写“cooperative类”.‘cooperative类’通过多继承,使用我称之为‘cooperative super call’的模式. 先来 ...

  8. linux扫盲之CPU模式

    相信研究linux的大大都知道linux有实模式.保护模式.虚拟模式三种. 不多说,拷贝黏贴!  80386开始,cpu有三种工作方式:实模式,保护模式和虚拟8086模式.只有在刚刚启动的时候是rea ...

  9. CODE FESTIVAL 2017 qual B D 101 to 010(dp)

    除非人品好,能碰巧想到思路,否则基本是做不出来dp的,除了那几个经典的dp模型.. 看了几个前几名的代码,还是t神的代码比较清晰.膜tourist 代码的思路和题解思路基本一致..... #inclu ...

  10. oracle 用表连接替换EXISTS

    通常来说 , 采用表连接的方式比EXISTS更有效率 SELECT ENAME FROM EMP E WHERE EXISTS (SELECT ‘X’ FROM DEPT WHERE DEPT_NO ...