HTML代码:

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

JS代码:

  1. var btn = document.querySelectorAll('.btn');
  2.  
  3. for(var i =0; i<btn.length; i++)
  4. {
  5. ((i)=>{
  6. btn[i].onclick = ()=>{
  7. aleter('我是按钮'+btn[i].getAttribute('id'));
  8. };
  9. })(i);
  10. }

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. @bzoj - 4951@ [Wf2017]Money for Nothing

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 在这道题种你需要解决一个全世界人类从存在起就在面临的最深刻的问题 ...

  2. pytorch 多GPU训练总结(DataParallel的使用)

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/weixin_40087578/artic ...

  3. 序列化方案选型对比 - JSON/ProtocolBuffer/FlatBuffer/DIMBIN

    4千字长文预警!! 背景 JSON/XML不好吗? 好,再没有一种序列化方案能像JSON和XML一样流行,自由.方便,拥有强大的表达力和跨平台能力.是通用数据传输格式的默认首选.不过随着数据量的增加和 ...

  4. “不是不需要运维工程师,是人人皆是运维”|对话阿里云MVP蒋烁淼(上)

    摘要: 与湖畔大学首期学员.阿里云MVP.驻云创始人蒋烁淼面对面 [三位阿里云MVP(驻云CEO.首席架构师.大数据总监)<MVP时间>首次同台授课,“湖畔第一大脑” 蒋烁淼领头线上精讲, ...

  5. MyBatis动态批量插入、更新Mysql数据库的通用实现方案

    一.业务背景 由于需要从A数据库提取大量数据同步到B系统,采用了tomikos+jta进行分布式事务管理,先将系统数据源切换到数据提供方,将需要同步的数据查询出来,然后再将系统数据源切换到数据接收方, ...

  6. 当pip安装因为网络超时而无法安装的时候慢

    2.4 尝试pip --default-timeout=1000 install  https://download.pytorch.org/whl/cu100/torch-1.1.0-cp36-cp ...

  7. oracle函数 CONCAT(c1,c2)

    [功能]连接两个字符串 [参数]c1,c2 字符型表达式 [返回]字符型 同:c1||c2 [示例] select concat('010-','88888888')||'转23' 高乾竞电话 fro ...

  8. react+antd 点击分页为上次操作结果

    最近项目中在使用antd的分页组件时发生了第一次点击分页无变化,再次点击时数据为上一次的分页结果,代码如下: setPageIndex = (pagination)=> { const page ...

  9. 2-3-4 tree留坑

    #include<bits/stdc++.h> #define LL long long #define pii pair<int,int> #define mp make_p ...

  10. C# Brush Color String 互相转换

    using System.Windows.Media; //String转换成Color Color color = (Color)ColorConverter.ConvertFromString(s ...