<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. mock 模拟数据在框架中的简单使用

    首先在框架中需要安装mock模块 cnpm i mockjs -S 其次在src文件夹下新建mock文件夹,在mock文件夹中新建一个index.js文件 代码如下: const Mock = req ...

  2. NVIDIA-SMI has failed because it couldn't communicate with the NVIDIA driver ...

    显卡驱动找不到解决方案:亲测有效 step1:sudo apt-get install dkms step2:   sudo dkms install -m nvidia -v 390.129 nvi ...

  3. 反射(hasattr和getattr和setattr和delattr)

    目录 一.反射在类中的使用 1.1 应用 二.反射在模块中的使用 2.1 前言 2.2 反射机制 2.2.1 getattr() 2.2.2 hasattr(object, name) 2.2.3 s ...

  4. mongodb简单监控

    一.mongodb提供了自己的监控工具 mongostat mongostat是mongodb自带的状态检测工具,在命令行下使用.它会间隔固定时间获取mongodb的当前运行状态,并输出.如果你发现数 ...

  5. 解决centos下tomcat启动太慢 & JDBC连接oracle太慢的问题

    近期遇到一个非常奇怪的问题,也不知道改了什么,tomcat启动非常慢,以前几秒就启动好了,现在要30秒左右. 而且,通过jdbc连接oracle数据库也非常慢,以前建立一个连接只要几十毫秒,现在也要1 ...

  6. node环境下多种方式“get数据解析”

    1.自己写 const http = require('http'); http.createServer(function(req,res){ var get = {}; if(req.url.in ...

  7. 【总结】《氨基酸新晋管理者领导力培训》第一次课_Day2_学习心得

    7月26日第二天学习心得: 今天主要学习了执行贯彻和绩效反馈两大块内容,我的心得有: 一.执行层面有两大原则:--理解员工需求: 回顾了一下自己以往的经历,一般这块我用的最多的一般是在接到一个新项目的 ...

  8. 关于Maven+Tomcat7下cannot be cast to javax.servlet.Servlet问题的解决办法

    今天在开发 JavaWeb 项目的时候,遇到了这么一个问题,这个错误是我在进行表单的异步提交的时候出现的.无法转化为 Servlet 经过我的一番检查之后!没有发现任何问题.... 注解配置无误 继承 ...

  9. 一篇短文带您了解一下EasyCaching

    前言 从2017年11月11号在Github创建EasyCaching这个仓库,到现在也已经将近一年半的时间了,基本都是在下班之后和假期在完善这个项目. 由于EasyCaching目前只有英文的文档托 ...

  10. RocketMQ(4)---RocketMQ核心配置讲解

    RocketMQ核心配置讲解 RocketMQ的核心配置在broker.conf配置文件里,下面我们来分析下它. 一.broker.conf配置 下面只列举一些常用的核心配置讲解. 1.broker. ...