事件代理/事件委托----点击li弹出对应的下标和内容
<body>
<ul>
<li>这是第一行</li>
<li>这是第二行</li>
<li>这是第三行</li>
<li>这是第四行</li>
<li>这是第五行</li>
</ul>
</body>
第一种：
var lis=document.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
lis[i].index=i; // 给每个li赋一个下标
lis[i].onclick=function(){
alert(this.index+"----"+this.innerHTML);
};
}
第二种：
var lis=document.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
(function(n){
lis[n].onclick=function(){
alert(n+this.innerHTML);
};
})(i);
}
第三种：
var lis=document.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
lis[i].onclick=function(n){
return function(){
alert(n+lis[n].innerHTML);
};
}(i);
}
第四种：
$("ul li").click(function(){
var i=$(this).index();
var text=$(this).text();
alert(i+text);
});
第五种：（事件代理）
var ul=document.getElementsByTagName("ul")[0];
ul.addEventListener("click",clickHandler);
function clickHandler(e){
if(e.target.nodeName!=="LI") return; // 或者写 if(e.target.constructor!==HTMLLIElement) return;
var arr=Array.from(ul.children);
var index=arr.indexOf(e.target);
var text=arr[index].innerHTML;
console.log(index+text)
}
第六种：（jq事件代理）
$(function(){
$("ul").click(function (e) {
var target=$(e.target);
var index=target.index();
var text=target.text();
console.log(index+text)
});
});
事件代理/事件委托----点击li弹出对应的下标和内容的更多相关文章
- js循环给li绑定事件实现 点击li弹出其索引值 和内容
代码如下: html代码 <ul> <li>房产</li> <li>家居</li> <li>二手房</li> < ...
- ionic3 点击input 弹出白色遮罩 遮挡上部内容
在Manifest中的activity里设置android:windowSoftInputMode为adjustPan,默认为adjustResize,当前窗口的内容将自动移动以便当前焦点从不被键盘覆 ...
- JavaScript事件代理和委托
在javasript中,代理.委托经常出现. 那么它究竟在什么样的情况下使用?它的原理又是什么? 这里介绍一下javascript delegate的用法和原理,以及Dojo,jQuery等框架中de ...
- js事件代理（委托）
JavaScript事件代理(委托)一般用于以下情况: 1. 事件注册在祖先级元素上,代理其子级元素.可以减少事件注册数量,节约内存开销,提高性能. 2. 对js动态添加的子元素可自动绑定事件. 之前 ...
- 【JS深入学习】——事件代理/事件委托
事件代理/事件委托(event delegation) 需求一:当一个div内部有多个事件发生,给每个元素逐个添加事件十分麻烦... 需求二:在项目中我们常常需要动态的添加元素,不可避免的需要为那些未 ...
- JavaScript实现点击按钮弹出输入框，点确定后添加li组件到ul组件里
JavaScript实现点击按钮弹出输入框,点确定后添加li组件到ul组件里 <!doctype html> <html manifest="lab4.manifest&q ...
- SetWinEventHook 事件钩子（有些windows事件并没有消息对应，譬如弹出菜单，切换窗口，获得焦点，滚动条滚动等）good
相信消息钩子大家听的比较多,消息钩子能够在应用程序处理系统消息之前将其截获,提前处理并可以决定是否继续将消息往下传送,有些windows事件并没有消息对应,譬如弹出菜单,切换窗口,获得焦点,滚动条滚动 ...
- jQuery点击图片弹出放大可拖动图片查看
CSS代码: .popup-bigic { position: absolute; ; ; background: #eee; overflow: hidden; ; } .popup-bigic . ...
- Android定位&地图&导航——基于百度地图，实现自定义图标绘制并点击时弹出泡泡
一.问题描述 上一次我们使用百度地图实现基本的定位功能,接下来我们继续实现搜索和定位,并使用LocationOverlay绘制定位位置,同时展示如何使用自定义图标绘制并点击时弹出泡泡 如图所示: 二. ...
随机推荐
- 在Ubuntu环境下配置Proxmark3（PM3）使用环境
参考资料:PM3官方Wiki 因为国内网络上大多是在Kali系统上使用PM3的教程(链接1.链接2.链接3),而这些教程的步骤对于Ubuntu系统并不完全适用.所以写下本文,记录我个人的安装经历. 本 ...
- Aladdin and the Flying Carpet (LightOJ - 1341）【简单数论】【算术基本定理】【分解质因数】
Aladdin and the Flying Carpet (LightOJ - 1341)[简单数论][算术基本定理][分解质因数](未完成) 标签:入门讲座题解 数论 题目描述 It's said ...
- python第三次作业-mooc笔记
1.注册中国大学MOOC 2.选择北京理工大学嵩天老师的<Python网络爬虫与信息提取>MOOC课程3.学习完成第0周至第4周的课程内容,并完成各周作业 4.提供图片或网站显示的学习进度 ...
- Educational Codeforces Round 37 (Rated for Div. 2) E. Connected Components? 图论
E. Connected Components? You are given an undirected graph consisting of n vertices and edges. Inste ...
- CF1253F Cheap Robot（神奇思路，图论，最短路，最小生成树/Kruskal 重构树/并查集）
神仙题. 先考虑平方级别的暴力怎么做. 明显答案有单调性,先二分 \(c\). 先最短路预处理 \(dis_u\) 表示 \(u\) 到离它最近的充电站的距离(一开始把 \(1\) 到 \(k\) 全 ...
- 使用canal增量同步mysql数据库信息到ElasticSearch
本文介绍如何使用canal增量同步mysql数据库信息到ElasticSearch.(注意:是增量!!!) 1.简介 1.1 canal介绍 Canal是一个基于MySQL二进制日志的高性能数据同步系 ...
- celery定时器
Celery 1.什么是Clelery Celery是一个简单.灵活且可靠的,处理大量消息的分布式系统 专注于实时处理的异步任务队列 同时也支持任务调度 Celery架构 Celery的架构由三部分组 ...
- 【STM32H7教程】第24章 STM32H7的Cache解读（非常重要）
完整教程下载地址:http://www.armbbs.cn/forum.php?mod=viewthread&tid=86980 第24章 STM32H7的Cache解读(非常重要 ...
- Linux系统管理图文详解超详细精心整理
前言:带你遨游于linux系统管理知识的海洋,沐浴春日里的阳光,循序渐进,看完之后收获满满. 本次讲解基于linux(centos6.5)虚拟机做的测试,centos7估计以后有时间再更新啊. lin ...
- 关于Unity中AI随机巡逻障碍物预判与快速运动时物理穿透的思考
如果不想用Unity的导航系统,很多时候就要解决如何预判前进路径中的障碍物问题,之前也看过一些非常经典的寻路算法例如AStar寻路,虽然也可实现功能,但总感觉有些小题大做.寻路算法大多数都是为了得出最 ...