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. VIM中空格和TAB的替换

    在.vimrc中添加以下代码后,重启vim即可实现按TAB产生4个空格:set ts=4  (注:ts是tabstop的缩写,设TAB宽4个空格)set expandtab 对于已保存的文件,可以使用 ...

  2. Cmake在编译osgEarth时遇到的一个错误

    CMake Error at src/osgEarthDrivers/CMakeLists.txt:7 (PROJECT): The CMAKE_C_COMPILER: llvm-gcc-4.2 is ...

  3. 重装系统后ORACLE数据库恢复的方法

    如果我们的操作系统出现问题,重装系统后,ORACLE数据库应该如何恢复呢?下文就为您列举了两个重装系统后ORACLE数据库恢复的方法,供您参考. ORACLE数据库恢复的方法我们经常会用到,下面就为您 ...

  4. String字符串的比较 Day15

    package com.sxt.review; /* * String字符串的比较 * ==和equals() * 总结:比较String内容时用equals()方法 */ public class ...

  5. find 使用搜集

    find:-atime +n/-n:表示访问或执行时间大于或小于n天的文件-ctime +n/-n:表示写入.更改inode属性的时间大于或小于n天的文件-mtime +n/-n:表示写入时间大于或小 ...

  6. 洛谷 3174 [HAOI2009]毛毛虫

    题目描述 对于一棵树,我们可以将某条链和与该链相连的边抽出来,看上去就象成一个毛毛虫,点数越多,毛毛虫就越大.例如下图左边的树(图 1 )抽出一部分就变成了右边的一个毛毛虫了(图 2 ). 输入输出格 ...

  7. How to use AutoMapper

    http://docs.automapper.org/en/stable/Getting-started.html IMappingExpression<TSource, TDestinatio ...

  8. Python中进制转换函数的使用

    Python中进制转换函数的使用 关于Python中几个进制转换的函数使用方法,做一个简单的使用方法的介绍,我们常用的进制转换函数常用的就是int()(其他进制转换到十进制).bin()(十进制转换到 ...

  9. 性能改善后复杂SQL

    <?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE mapper PUBLIC "-/ ...

  10. oracle使用TKPROF 工具来查询SQL性能状态

    SQL trace 工具收集正在执行的SQL的性能状态数据并记录到一个跟踪文件中. 这个跟踪文件提供了许多有用的信息,例如解析次数.执行次数,CPU使用时间等.这些数据将可以用来优化你的系统. 设置S ...