事件代理/事件委托----点击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绘制定位位置,同时展示如何使用自定义图标绘制并点击时弹出泡泡 如图所示: 二. ...
随机推荐
- Luogu P5408 【模板】第一类斯特林数·行
为什么要做这题呢,当然是有用啊qwq 首先我们考虑非常经典的式子: \[x^{\overline{n}}=\sum_i \left[^n_i\right] x^i\] 然后上倍增: \[x^{\ove ...
- flask--数据库迁移之连环踩坑记
flask数据库迁移命令: python manage.py db init python manage.py db migrate python manage.py db upgrade 1.报错: ...
- Ubuntu更新python3.5到python3.7
一 下载wget https://www.python.org/ftp/python/3.7.1/Python-3.7.1rc2.tgz 二 解压tar zxvf Python-3.7.1rc2.tg ...
- IT兄弟连 HTML5教程 HTML5的基本语法 简单HTML实例制作
现在学习HTML5的方式 目前HTML还处于HTML4与HTML5之间的过渡使用阶段.移动端的Web界面开发已经全面使用HTML5的技术,而在PC端由于用户升级浏览器周期较长,面临着页面的兼容性问题, ...
- solidity智能合约如何判断mapping值为空
mapping值的判断问题 在Java这类编程语言中,我们可以获得Map里面的值然后与null或空来进行判断该key对应的值是否为空.可是在solidity中貌似并没有提供类似的判断.那么我们如果来进 ...
- 死磕 java同步系列之ReentrantReadWriteLock源码解析
问题 (1)读写锁是什么? (2)读写锁具有哪些特性? (3)ReentrantReadWriteLock是怎么实现读写锁的? (4)如何使用ReentrantReadWriteLock实现高效安全的 ...
- Android中几种常用的定时器和延时方法
通过实际项目的练习,掌握了几种android基本定时器和延时的用法,这里我想总结一下作为自己的收获,下面列出的是比较简洁的模式,方便简单地在程序中直接调用. 一.三种常用的定时器 1.Handler类 ...
- 在python中实现随机选择
想从一个序列中随机抽取若干元素,或者想生成几个随机数. random 模块有大量的函数用来产生随机数和随机选择元素.比如,要想从一个序列中随机的抽取一个元素,可以使用random.choice() : ...
- Dynamics CRM 2015/2016新特性之三十二：新增乐观并发处理
关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复215或者20160328可方便获取本文,同时可以在第一间得到我发布的最新的博文信息,follow me!我的网站是 www.luoyong. ...
- 微服务（入门学习五）：identityServer4+ocelot+consul实现简单客户端模式
简介 主要是采用identity Server4 和ocelot 加上consul 实现简单的客户端模式 开发准备 环境准备 下载并安装Consul具体请参考前几篇的内容 项目介绍 创建ocelot ...