JS闭包机制实现为DOM元素循环添加事件
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元素循环添加事件的更多相关文章
- JS给元素循环添加事件的问题
<ul> <li>男</li> <li>女</li> <li>老</li> <li>少</li&g ...
- 如何在通过knockout数据绑定的DOM元素上添加事件
通过knockout数据绑定的DOM元素,通过chrome控制台打断点知道,DOM元素会被暂时隐藏,使用document.querySelector()是获取不到的,会显示null,直到数据绑定完成才 ...
- dom元素循环绑定事件的技巧
以前总觉得自己写的代码不太规范,尤其是写原生的时候.举个例子: 要为页面上所有".a"的元素绑定事件,当然了用jquery很方便:$('.a').bind("click& ...
- 【特效】给元素循环添加class
经常会遇到给元素循环添加class的效果,例如下面这个图 每个模块的背景色和图标都不相同,但是呢,模块的数量又不确定,说不定有几十个,那我不能设计几十个图标吧,所以,可以做成每9个一循环,也就是第10 ...
- JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;
JavaScript Dom基础 学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...
- event.target 属性返回哪个 DOM 元素触发了事件。
<ul> <li>list <strong>item 1</strong></li> <li><span>list ...
- react快速上手一(使用js语法,创建虚拟DOM元素)
1.装包,引包 首先需要安装两个包 react ,react-dom cnpm i react react-dom 介绍下这两个包: react:专门用来创建React组件,组件生命周期等这些东西. ...
- JS数组方法汇总 array数组元素的添加和删除
js数组元素的添加和删除一直比较迷惑,今天终于找到详细说明的资料了,先给个我测试的代码^-^ var arr = new Array(); arr[0] = "aaa"; arr[ ...
- js循环添加事件的问题
1.需求 给下面每个按钮增加事件 <ul id="list"> <li>按钮1</li> <li>按钮2</li> &l ...
随机推荐
- bzoj1221 软件开发
Description 某软件公司正在规划一项n天的软件开发计划,根据开发计划第i天需要ni个软件开发人员,为了提高软件开发人员的效率,公司给软件人员提供了很多的服务,其中一项服务就是要为每个开发人员 ...
- swap function & copy-and-swap idiom
在C++中,众所周知在一个资源管理类(例如含有指向堆内存的指针)中需要重新定义拷贝构造函数.赋值运算符以及析构函数(Big Three),在新标准下还可能需要定义移动构造函数和移动赋值运算符(Big ...
- Java练习 SDUT-1294_选票统计
选票统计 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 某校学生会主席由全校学生投票选举产生,共有m名候选人报名参选, ...
- @loj - 2496@ 「AHOI / HNOI2018」毒瘤
目录 @description@ @solution@ @accepted code@ @details@ @description@ 从前有一名毒瘤. 毒瘤最近发现了量产毒瘤题的奥秘.考虑如下类型的 ...
- @codeforces - 1209H@ Moving Walkways
目录 @description@ @solution@ @accepted code@ @details@ @description@ 机场中常常见到滑行道:假如一个滑行道的运行速度为 s,你的行走速 ...
- 模板—tarjan求割边
int dfn[MAXN],low[MAXN],cnt; void tarjan(int x,int edg) { low[x]=dfn[x]=++cnt; for(int i=f(x);i;i=n( ...
- WPS修订功能的使用
WPS设置 设置用户名: 修改之后的效果:
- 洛谷 2152 [SDOI2009]SuperGCD
Description Sheng bill有着惊人的心算能力,甚至能用大脑计算出两个巨大的数的GCD(最大公约 数)!因此他经常和别人比赛计算GCD.有一天Sheng bill很嚣张地找到了你,并要 ...
- Samba服务器 安装
yum -y install samba cp /etc/samba/smb.conf /etc/samba/smb.conf.bak cat >> /etc/samba/smb.conf ...
- Spark-shell批量命令执行脚本
#!/bin/bash source /etc/profile exec $SPARK_HOME/bin/spark-shell --queue tv --name spark-sql-test -- ...