<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弹出对应的下标和内容的更多相关文章

  1. js循环给li绑定事件实现 点击li弹出其索引值 和内容

    代码如下: html代码 <ul> <li>房产</li> <li>家居</li> <li>二手房</li> < ...

  2. ionic3 点击input 弹出白色遮罩 遮挡上部内容

    在Manifest中的activity里设置android:windowSoftInputMode为adjustPan,默认为adjustResize,当前窗口的内容将自动移动以便当前焦点从不被键盘覆 ...

  3. JavaScript事件代理和委托

    在javasript中,代理.委托经常出现. 那么它究竟在什么样的情况下使用?它的原理又是什么? 这里介绍一下javascript delegate的用法和原理,以及Dojo,jQuery等框架中de ...

  4. js事件代理（委托）

    JavaScript事件代理(委托)一般用于以下情况: 1. 事件注册在祖先级元素上,代理其子级元素.可以减少事件注册数量,节约内存开销,提高性能. 2. 对js动态添加的子元素可自动绑定事件. 之前 ...

  5. 【JS深入学习】——事件代理/事件委托

    事件代理/事件委托(event delegation) 需求一:当一个div内部有多个事件发生,给每个元素逐个添加事件十分麻烦... 需求二:在项目中我们常常需要动态的添加元素,不可避免的需要为那些未 ...

  6. JavaScript实现点击按钮弹出输入框，点确定后添加li组件到ul组件里

    JavaScript实现点击按钮弹出输入框,点确定后添加li组件到ul组件里 <!doctype html> <html manifest="lab4.manifest&q ...

  7. SetWinEventHook 事件钩子（有些windows事件并没有消息对应，譬如弹出菜单，切换窗口，获得焦点，滚动条滚动等）good

    相信消息钩子大家听的比较多,消息钩子能够在应用程序处理系统消息之前将其截获,提前处理并可以决定是否继续将消息往下传送,有些windows事件并没有消息对应,譬如弹出菜单,切换窗口,获得焦点,滚动条滚动 ...

  8. jQuery点击图片弹出放大可拖动图片查看

    CSS代码: .popup-bigic { position: absolute; ; ; background: #eee; overflow: hidden; ; } .popup-bigic . ...

  9. Android定位&地图&导航——基于百度地图，实现自定义图标绘制并点击时弹出泡泡

    一.问题描述 上一次我们使用百度地图实现基本的定位功能,接下来我们继续实现搜索和定位,并使用LocationOverlay绘制定位位置,同时展示如何使用自定义图标绘制并点击时弹出泡泡 如图所示: 二. ...

随机推荐

  1. JavaScriptES6中Map与对象、数组，JSON之间的相互转换

    JavaScriptES6中Map与对象.数组,JSON之间的相互转换 https://blog.csdn.net/c__dreamer/article/details/82183130

  2. ReactNative: 使用Text文本组件

    一.简言 初学RN,一切皆新.Text组件主要用于显示文本,Text组件的重要性不言而喻,无论是Web开发还是客户端开发,都离不开它.它具有响应特性,也即表现为当它被触摸时是否显示为高亮状态.在Web ...

  3. 多网卡做team

    简明的说,就是把多个物理网卡绑定成一个逻辑上的网卡,以增加带宽,或者实现主备功能,增加硬件冗余,以实现更高的系统稳定性,目前主要有bond和team两种做法,而bond主要是针对双网卡的情况来说,而t ...

  4. 《细说PHP》第四版 样章 第23章 自定义PHP接口规范 8

    23.5.2  架构详解 本例的实现最重要的就是服务层的设计,有两个配置文件config.php和api.php,其中文件config.php是全局的配置文件,用于整个程序全局需要的参数设置.可以根据 ...

  5. MySQL基础之STRAIGHT JOIN用法简介

    MySQL基础之STRAIGHT JOIN用法简介 引用mysql官方手册的说法: STRAIGHT_JOIN is similar to JOIN, except that the left tab ...

  6. 层级轮播图（animate）

    层级轮播图(animate) css <style type="text/css"> * { margin: 0; padding: 0; } ul, ol { lis ...

  7. Spring核心（IoC） 入门解读

    什么是IoC容器和Bean? 说到容器,就是用来装东西,那么这里边装的是什么那?是bean对象.那么你会问什么是bean?这就要从很久很久以前说起,当我们创建对象的时候,我们会new一个对象出来,但是 ...

  8. Android studio移动项目到另外一个文件夹，结果不能安装的解决方法

    删除.gradle , .idea , build 三个文件夹即可

  9. 高强度学习训练第五天总结:JAVA对象+GC

    第五天了.. 理清了Java对象的创建过程,分配内存,线程安全性,对象头和对象的访问定位 理清了JVM GC的发展历史,算法,例如: 可达性分析 引用计数法 标记-清楚法 复制算法 标记-整理算法 分 ...

  10. Thread之模板模式

    我们知道,在实际使用线程的时候,真正的执行逻辑都是写在run方法里面,run方法是线程的执行单元,如果我们直接使用Thread类实现多线程,那么run方法本身就是一个空的实现,如下: /** * If ...