这是一个非常常见的面试题,出题方式多样,但考察点相同,下面我们来看看这几种方法:
方法一:

var itemli = document.getElementsByTagName("li");

for(var i = 0; i<itemli.length; i++){

    itemli[i].index = i; //给每个li定义一个属性索引值

    itemli[i].onclick = function(){

      alert(this.index+this.innerHTML); 

    }

}

方法二:

var itemli = document.getElementsByTagName("li");

for(var i = 0; i<itemli.length; i++){

   (function(n){

  itemli[i].onclick = function(){

      alert(n+itemli[n].innerHTML); 

     }

  })(i)

}

方法三:

var itemli = document.getElementsByTagName("li");

for(var i = 0; i<itemli.length; i++){
itemli[i].onclick = function(n){
    return function(){
alert(n+itemli[n].innerHTML);
}
  }(i)
}

方法四:

$("ul li").click(function(){
var item = $(this).index(); //获取索引下标 也从0开始
var textword = $(this).text(); //文本内容
alert(item+textword);
})

上面这四种方法都可以实现循环绑定,但是我们知道,频繁的操作DOM是非常消耗性能的,如果有1000个li,怎么办呢?我们还有另一种思路,事件代理,又称事件委托。简单的来讲就是利用JS中事件的冒泡属性,把原本需要绑定的事件委托给父元素,让父元素担当事件监听的职务。下面我们来看看。

方法五(JS事件代理):

var ul = document.querySelector("ul");
  ulItem.onclick = function (e) {
  e = e || window.event; //这一行及下一行是为兼容IE8及以下版本
  var target = e.target || e.srcElement;
  if (target.tagName.toLowerCase() === "li") {
    var li = this.querySelectorAll("li");
    index = Array.prototype.indexOf.call(li, target);
    alert(target.innerHTML + index);
  }
}

上述代码中,为什么需要 “index = Array.prototype.indexOf.call(li,target);” 这样使用数组的indexOf方法呢,这是因为querySelectorAll方法获取到的元素列表不是数组,和函数的arguments一样是一种类数组类型,不可以直接使用数组的方法。

方法六(jQuery事件代理):

$(document).ready(function () {
  $("ul").on("click", function (event) {
  var target = $(event.target);
  alert(target.html() + target.index())
});

JS如何给ul下的所有li绑定点击事件,点击使其弹出下标和内容的更多相关文章

  1. jquery获取ul下的所有li个数

    通过jquery获取ul下所有li的个数(eg) $("ul li").length 通过jquery设置标签css的样式(eg)$("#div").css({ ...

  2. JS 循环给li绑定参数不同的点击事

    以下内容纯属个人理解,不正确的地方还请大神留言,不胜感激! 源代码:(按个人方式选用一种即可) <ul> <li>1</li> <li>2</li ...

  3. js弹出div层内容(按回退键关闭div层及遮罩)

    <!--弹出的div列表对应的详情--> <div id="newhtml" class="white_content"> <di ...

  4. jquery 判断ul下是否存在li

    $("ul").has("li").length > 0;$("ul > li").length > 0;$(" ...

  5. 2018.7.6 js实现点击事件---点击小图出现大图---时间定时器----注册表单验证

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  6. js验证前后密码是否一致,为什么当我输入不一致密码时,不会弹出警告啊

    <form name="form" action="#"><input type="password" id=" ...

  7. 遍历ul下的li,点击弹出li的索引

    首先我们需要一个html结构 <div > <ul> <li>a</li> <li>a</li> <li>a< ...

  8. 通过jquery获取ul中第一个li的属性

    当加载列表时,默认希望选中第一条.top_menu 为ul的ID 通过 $("#top_menu li:first") 就可以获取到 ul下第一个li标签.然后就可以利用 例如 修 ...

  9. 用mobiscroll.js的treelist实现弹出下拉效果

    首先跟上次说的一样, 第一步:引入js.css样式 1)mobiscroll-2.13.2.full.min.css 2)jquery.min.js 3)mobiscroll-2.13.2.full. ...

随机推荐

  1. arcgis版接合图表5.2 免费软件,支持国家2000坐标系,ArcGIS10.0,ArcGIS10.1,ArcGIS10.2都可以使用

    下载地址:http://files.cnblogs.com/gisoracle/jionmap52.rar 1.      国家2000,西安80,北京54.坐标系的接合图表生成.根据经纬度范围,坐标 ...

  2. JS高级程序设计第三版——基本概念

    前言:任何语言的核心都必然会描述这门语言最基本的工作原理.而描述的内容通常都要设计这门语言的语法.操作符.数据类型.内置功能等用于构建复杂解决方案的基本概念. 语法: 1.  区分大小写: 2.  标 ...

  3. c++类模板成员函数报错

    类模板成员函数要不就在类模板中实现,要不就和类模板写在同一个文件中. 否则然会出现下面错误: >main.obj : error LNK2019: 无法解析的外部符号 "public: ...

  4. js判断一个对象是否为数组

    1,真正的数组的判断方法 javascript中最简单的声明数组方法为: var a = []; 判断是否为数组的最直接的方法为: 复制代码 代码如下: a instanceof Array //tr ...

  5. 华为OJ-表示数字

    要求:将一个字符中所有出现的数字前后加上符号"*",其他字符保持不变 #include<iostream> #include<string> using n ...

  6. npm 安装axios和使用增删改查

    1:安装axios(建议安装淘宝镜像) npm install axios 2:项目导入 npm install --save axios vue-axios 3:页面导入 import axios ...

  7. GCO团队合作

    队名:GCO 队员:   B20150304116谢冰媛 (组长) B20150304401王粲 B20150304115钟玺琛            B20150304226梁天海          ...

  8. python入门18 继承和多态

    继承:子类继承父类的属性和方法  class 子类名(父类1,父类2) 多态:子类重写父类的方法 判断对象是否是某个类的实例:  isinstance(object,class) 父类-汽车类 #co ...

  9. Jmeter入门9 __digest函数 jmeter字符串连接与登录串加密应用

     登录请求中加密串是由多个子串连接,再加密之后传输. 参数连接:${var1}${var2}${var3} 加密函数:__digest    (函数助手里如果没有该函数,请下载最新版本的jmeter5 ...

  10. Git 还没push 前可以做的事(转)

    Git 版本控制系統(3) 還沒 push 前可以做的事 转载:http://ihower.tw/blog/archives/2622   這一集要講的是:還沒 push 前可以做的壞事,也就是 re ...