js循环添加事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>菠萝</li>
<li>猕猴桃</li>
<li>芒果</li>
</ul>
</body>
</html>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
<script type="text/javascript">
var itemli = document.getElementsByTagName("li");
//方法一：
// for(var i =0;i<itemli.length;i++){
// itemli[i].index = i;
// itemli[i].onclick = function () {
// console.log(this.index+this.innerHTML);
// }
// } // 方法二：
// for(var i = 0; i<itemli.length; i++){
//
// (function(n){
//
// itemli[i].onclick = function(){
//
// console.log(n+itemli[n].innerHTML); // 索引值从0开始
//
// }
//
// })(i)
//
// } // 方法三：
// for(var i = 0; i<itemli.length; i++){
// itemli[i].onclick = function(n){
// return function(){
// console.log(n+itemli[n].innerHTML); // \n换行 索引值从0开始
// }
// }(i)
// } // 方法四：
$("ul li").click(function () {
var item = $(this).index();
var textword = $(this).text();
console.log(item+textword);
})
</script>
2.考虑到如果li是动态的添加；
可以把事件绑定在ul上，多次的事件不用在每个li绑定，而是用on一次绑定在ul上，提高了性能；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
</head>
<body>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
</ul>
</body>
</html>
<script type="text/javascript">
$("ul").on("mouseover",function(e){
$(e.target).css("background-color","#ddd").siblings().css("background-color","white");
});
</script>
js循环添加事件的更多相关文章
- js循环添加事件的问题
1.需求 给下面每个按钮增加事件 <ul id="list"> <li>按钮1</li> <li>按钮2</li> &l ...
- JS给元素循环添加事件的问题
<ul> <li>男</li> <li>女</li> <li>老</li> <li>少</li&g ...
- js动态添加事件-事件委托
作者:白狼 出处:http://www.manks.top/javascript-dynamic-event.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给 ...
- js动态添加事件
转载的,但不明确出处 往往我们需要在 JS 中动态添加事件,这就涉及到浏览器兼容性问题了,以下谈及的几种方法,我们也常常混合使用.方法一.setAttributevar obj = document. ...
- js中添加事件 attachEvent 与 addEventListener
给元素添加事件时,使用js进行实现时产生了疑惑,有关事件浏览器兼容的问题,在此记录如下. <!DOCTYPE html> <html> <head> <met ...
- JS——动态添加事件和移除事件（有待补充...）
动态的添加事件:利用 attachEvent 和 addEventListener IE 支持 attachEvent: obj.attachEvent("onclick", Fo ...
- JS - 循环添加 DropDownList（Select）
代码: <td style="padding-left: 10px;"> <select id="ddl_picture_3"> < ...
- 从循环添加事件谈起对JS闭包的理解
1.引子 相信很多初学js的人,都遇到这样一种情况:想要给一堆按钮添加各自的事件,比如点击第i个按钮时,弹出i这个值.理所当然地,我们会这样写: var buttons = document.getE ...
- JS闭包机制实现为DOM元素循环添加事件
HTML代码: <button type='button' class='btn' id='1'>按钮1</button> <button type='button' c ...
随机推荐
- ios Coredata 的 rollback undo 等事物处理函数
首先说明 ios 中 NSManagedObjectContext 默认的 undoManager是nil的,就是说 undo 和 redo 都是没用的. 但是 rollback函数和reset函数是 ...
- ACM/ICPC 之 模拟 (HNUOJ 13391-换瓶模拟)
题意:汽水瓶有三个部分cap+plastic bottle+ label(瓶盖-瓶身-瓶底),给出数据:n为原瓶数,x,y,z为这三个部分可以用相应的数字换取新瓶子,求最大总瓶数. 模拟(暴力) // ...
- Django ~module index
https://docs.djangoproject.com/en/1.9/py-modindex/ django.conf.urls django.contrib.admin django.db.m ...
- WP8图片缩放功能实现
最近在学习WP8,想实现WP微信中查看图片时的放大缩小功能. 网上找了两个解决方案: 1 利用GestureListener 这个类在Microsoft.Phone.Controls.Toolkit中 ...
- 【leetcode】First Missing Positive(hard) ☆
Given an unsorted integer array, find the first missing positive integer. For example,Given [1,2,0] ...
- HDU 4946 Area of Mushroom (几何凸包)
题目链接 题意:给定n个人,每个人有一个速度v方向任意.如果平面中存在一个点只有某个人到达的时间最短(即没有人比这个人到的时间更短或相同),那么我们定义这个店归这个人管辖,现在问这些人中哪些人的管辖范 ...
- SQL常用命令整理
1.增加字段 alter table docdsp add dspcodechar(200)2.删除字段 ALTER TABLE table_NAME DROP COLUMNcolum ...
- Java Socket编程题库
一. 填空题 ___ IP地址____用来标志网络中的一个通信实体的地址.通信实体可以是计算机,路由器等. 统一资源定位符URL是指向互联网"资源"的指针,由4部分组成:协议 ...
- 使用autolayout,设置子控件的宽度 与父视图的宽度成比例大小(这样类似可以设置多个按钮平均横屏排列)
橙色是父视图,假设约束如上图. 绿色是子视图.重点宽度比例设置: 1. control-drag 选择 equal width2. 选中上面那个约束 注意 first item 和 second it ...
- Linux iostat字段解析
iostat主要用于监控系统设备的IO负载情况,iostat首次运行时显示自系统启动开始的各项统计信息,之后运行iostat将显示自上次运行该命令以后的统计信息.用户可以通过指定统计的次数和时间来获得 ...