<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. bootstrap去除自带15px内边距，去除container 15px padding

     壹 ❀ 问题 在使用bootstrap时,由于bootstrap槽宽特性,我们在布局时会发现container以及col-**-**左右都会自带15px的padding,有时候空间不足就想着怎么把b ...

  2. Linux 部署 rabbitMQ集群

    1. 部署Erlang 1.1 RabbitMQ依赖于Erlang,版本对应请查看 https://www.rabbitmq.com/which-erlang.html 1.2 下载安装Erlang ...

  3. ExtJS布局控件

    Layout Controls Auto Layout Ext JS4中的容器的默认布局是自动布局.这个布局管理器会自动地将组件放在一个容器中. Fit Layout Fit布局安排了容器的内容完全占 ...

  4. MySQL应用之CROSS JOIN用法简介教程

    目录 2. cross join用法 @ 本博客翻译自两篇博客的: http://www.mysqltutorial.org/mysql-cross-join/ https://www.w3resou ...

  5. Algorithm： Prime & Euler Function & Productive Function

    素数筛 朴素算法 一般来说,可以用试除法判断某一个数是不是素数: bool isPrime(int n) { if(n < 2) return false; for(int i = 2; i & ...

  6. gcc原子操作测试

    #include <stdio.h> #include <pthread.h> #include <stdlib.h> ; void *test_func(void ...

  7. 【Java线程与内存分析工具】VisualVM与MAT简明教程

    目录 前言 VisualVM 安装与配置 本地使用 远程监控 MAT 使用场景 安装与配置 获得堆转储文件 分析堆转储文件 窥探对象内存值 堆转储文件对比分析 总结 前言 本文将简要介绍Java线程与 ...

  8. 关于window10更新之后，15.5版本虚拟机不能使用的情况：检测更新版本

    1.用了四五年的虚拟机,最近居然老提示检测更新版本,嗯,我将我的虚拟机由10版本,更新到了15.5版本,这也是网友说的,然而并灭有什么乱弄.window10系统自动更新,自动更新以后虚拟机就打不开了, ...

  9. 关于 SONY WF1000XM3 在 Windows 10 下蓝牙连接只有 Handfree 没有 Stereo 模式

    应该是驱动适配问题,目前粗暴的解决方案貌似下载安装一个 Intel APTX 驱动就可以了: https://www.dell.com/support/home/cn/zh/cndhs1/driver ...

  10. Android Studio当中的创建新方法的快捷键该如何使用？

    当有红线出现的时候,我们的代码并没有编译出错,则需要输入alt+enter则可以得到相应的神奇效果了.这个方法我竟然今天才知道,也真是丢脸了.比如说我们书写了一个新的没有创建的方法,我们直接输入alt ...