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 ...
随机推荐
- 【AtCoder Regular Contest 092】C.2D Plane 2N Points【匈牙利算法】
C.2D Plane 2N Points 题意:给定N个红点二维坐标N个蓝点二维坐标,如果红点横纵坐标都比蓝点小,那么它们能够构成一组.问最多能构成多少组. 题解:把满足要求的红蓝点连线,然后就是匈牙 ...
- jquery on事件
可以给后添加的动态元素绑定事件
- oracle Sql语句分类
dml语句:数据操作语句[insert,update,delete] ddl语句:数据定义语言[create table,drop table] dql语句:数据查询语句[select] dtl语句: ...
- BZOJ 1934洛谷2057善意的投票题解
题目链接 BZ链接 又是一道玄学的网络流题 我们这样建图: 对于同意观点1的原点向其连边,对于同一观点2点向汇点连边 然后如果两个人是朋友,就连一条双向边. 为什么这样是对的呢? 对于一个人来说,他要 ...
- wepy中组件之间通信方法
events events是WePY组件事件处理函数对象,存放响应组件之间通过broadcast.emit.$invoke所传递的事件的函数. $broadcast —— 父往子传 $broadcas ...
- SharpDX初学者教程第5部分:着色三角形
原文 http://www.johanfalk.eu/blog/sharpdx-beginners-tutorial-part-5-coloring-the-triangle 在第4部分中,我们创建了 ...
- 【[Offer收割]编程练习赛9 D】 矩阵填数
[题目链接]:http://hihocoder.com/problemset/problem/1480 [题意] [题解] 这是一道杨氏矩阵的题; 一个固定形状的杨氏矩阵的种类个数; 等于这个杨氏矩阵 ...
- webpack详述
一.利用package.json执行打包任务 首先使用npm init生成package.json文件:然后配置scripts如下: "scripts": { "buil ...
- 解决bootStrap selectpicker 下拉栏上方弹出
最近项目中遇到了一个使用bootStrap selectpicker 进行下拉栏展示的时候出现在元素上方弹出展示的问题,可把我难受坏了,和测试互怼最终以失败告终(人家还是一个娇滴滴的小姑娘),在查了a ...
- hdu 5793 A Boring Question(2016第六场多校)
A Boring Question Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others ...