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 ...
随机推荐
- C++ 引用#include<math.h> 找不到动态库
问题: 使用g++ 编译C++文件报错了,无法识别abs,可是我这文件中已经添加了#include<math.h>? 于是在指令中加入-lm g++ main.cpp AStar.cpp ...
- 元素的高度(基于vue)
const viewH =el.target.offsetHeight;//可见高度 const contentH =el.target.scrollHeight;//内容高度 const scrol ...
- Hdu 2522 hash
题目链接 题意:输入整数n (1<= abs(n) <= 10^5) , 输出 1/n. 这题不是自己做出来的...看了网上的思路.这种题目都能想到用hash..反正我是没往那里想,看到循 ...
- weixin 微信开放平台 微信公众平台
官网地址入口 微信小程序 https://mp.weixin.qq.com/ appid and openid not match 1.appid :是公众号的ID. 2.openid:关注公众号生成 ...
- LeetCode120 Triangle
Given a triangle, find the minimum path sum from top to bottom. Each step you may move to adjacent n ...
- Calendar类实现当前日期的日历
package com.sxt.home1; import java.text.DateFormat; import java.text.ParseException; import java.tex ...
- 创建ros消息时出现:Unable to load msg [planning/Num]: Cannot locate message [Num]: unknown pack.....
创建ros消息可参考创建ROS消息和ROS服务. 按照这个教程进行创建的过程中出现了如下错误: Unable to load msg [msgs/locate]: Cannot locate mess ...
- Centos6.9部署ORTS5.0.22
1.安装数据库 为了使用默认InnoDB引擎,Centos6.9上默认yum安装mysql5.1.73版本的,orts在初始化数据库时要求log大小要大于250M以上,因此干净安装Centos后,先安 ...
- epoll简介(一)
一:概述 1:简介 EPOLL类似于POLL,是Linux特有的一种IO多路复用的机制.它在2.5.44内核中引入. 对于大量的描述符处理,EPOLL更有优势,它提供了三个系统调用来创建管理epo ...
- H3C 路由器SSH服务配置命令(续)