事件代理/事件委托----点击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绘制定位位置,同时展示如何使用自定义图标绘制并点击时弹出泡泡 如图所示: 二. ...
随机推荐
- R的环境系统
r环境概念 环境:用来具体存储对象的地方. 规则1:每一个对象都存储在一个环境当中. 规则2:每一个环境都与一个父环境相连接,构成一个分层的环境系统. 规则3:子环境与父环境的连接是单向的. pa ...
- 第05组 Alpha事后诸葛亮
组长博客链接(2分) 组长博客链接 现代软件工程 项目Postmortem 模板(27分) 设想和目标(2分) 1.我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? ...
- bootstrap去除自带15px内边距，去除container 15px padding
壹 ❀ 问题 在使用bootstrap时,由于bootstrap槽宽特性,我们在布局时会发现container以及col-**-**左右都会自带15px的padding,有时候空间不足就想着怎么把b ...
- IT兄弟连 Java语法教程 关系运算符
关系运算符用来判定一个操作数与另外一个操作数之间的关系.特别是,它们可以判定相等和排序关系.表7中列出了关系运算符. 表7 关系运算符 关系运算符的结果为布尔值.关系运算符最常用与if语句和各种循环 ...
- vue 渐变 进度条 progress
废话 不多少说 ,直接上代码 新建文件 gradual-progress.vue <!-- * @Author: gfc * @Date: 2019-11-07 14:00:11 * @Last ...
- Linux常用命令之网络命令
write命令 write命令用于向指定登录用户终端上发送信息.通过write命令可传递信息给另一位登入系统的用户,当输入完毕后,键入EOF表示信息结束,write命令就会将信息传给对方.如果接收信息 ...
- C++ getline函数用法详解
转载自http://c.biancheng.net/view/1345.html 虽然可以使用 cin 和 >> 运算符来输入字符串,但它可能会导致一些需要注意的问题. 当 cin 读取数 ...
- mosquitto配置文件
#配置文件为mosquitto #参见mosquitto.conf(5)了解更多信息. #显示默认值,取消注释以更改. #使用#字符来表示注释,但只有当它是 #第一个字符就行了. #========= ...
- GO 函数的参数
一.函数 函数的参数 1.1 参数的使用 形式参数:定义函数时,用于接收外部传入的数据,叫做形式参数,简称形参. 实际参数:调用函数时,传给形参的实际的数据,叫做实际参数,简称实参. 函数调用: ...
- MongoDB 修改数据Cannot change the size of a document in a capped collection: * != *"
MongoDB修改数据库数据的时候报错 原因: 集合被设置成了 固定集合 .固定集合的数据不能被修改.只能查找-删除-再插入,也就是创建集合的时候设置了capped参数为true 解决: 创建集合的时 ...