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 ...
随机推荐
- 跟我一起认识axure(二)
创建企业网站页面步骤 第一步修改这里 变成 第一部分就完成了 第二部分部件窗口 在Axure中设计页面像小时候玩的拼图游戏,那么部件窗口就是专门用来存放拼图块的容器 使用部件窗口中常用的部件设计欢迎页 ...
- vuxdemo1
//main.js import Vue from 'vue' import router from './router' import store from './store' import axi ...
- Oracle日期
oracle 日期格式 to_date("要转换的字符串","转换的格式") 两个参数的格式必须匹配,否则会报错. 即按照第二个参数的格式解释第一个参数. ...
- Python中基于socketserver实现并发的socket
1.基于TCP协议: 服务端: import socketserver class MyHandler(socketserver.BaseRequestHandler): def handle(sel ...
- H5页面在iOS网页中的数字被识别为电话号码,字体颜色变黑色,且颜色不可改变
解决办法:在html中添加代码: <meta name="format-detection" content="telephone=no" />
- jQuery 链
通过 jQuery,可以把动作/方法链接在一起. Chaining 允许我们在一条语句中运行多个 jQuery 方法(在相同的元素上). jQuery 方法链接 直到现在,我们都是一次写一条 jQue ...
- vb.net机房收费系统——存储过程
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/xdd19910505/article/details/35574125 一.使用背景 ...
- @loj - 2674@ 「NOI2012」美食节
目录 @description@ @solution@ @accepted code@ @details@ @description@ CZ 市为了欢迎全国各地的同学,特地举办了一场盛大的美食节. 作 ...
- 模板—点分治A(容斥)(洛谷P2634 [国家集训队]聪聪可可)
洛谷P2634 [国家集训队]聪聪可可 静态点分治 一开始还以为要把分治树建出来……• 树的结构不发生改变,点权边权都不变,那么我们利用刚刚的思路,有两种具体的分治方法.• A:朴素做法,直接找重心, ...
- uniapp点击底部tabbar不跳转页面
一个项目,其设想是这样的,当我进入页面,发现有新版本,提示用户之后,用户点击确定跳转到下载页面. 弹出框要用自己封装的,因为uniapp的弹出框不同的手机上展示的样子不一样,领导的是华为(在这里悄悄吐 ...