JS如何给ul下的所有li绑定点击事件,点击使其弹出下标和内容
时间:2019-03-27
本文章向大家介绍JS如何给ul下的所有li绑定点击事件,点击使其弹出下标和内容,主要包括JS如何给ul下的所有li绑定点击事件,点击使其弹出下标和内容使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
这是一个非常常见的面试题,出题方式多样,但考察点相同,下面我们来看看这几种方法:
方法一:
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()) });
- [译]Laravel 5.0 之 Eloquent 属性转换
- [译]Laravel 5.0 之事件及处理程序
- 自相关与偏自相关的简单介绍
- [译]Laravel 5.0 之命令及处理程序
- Deep Photo Styletransfer的一种纯Tensorflow实现,教你如何转换图片风格
- 如何提前体验 Laravel 5.5
- Laravel 4 小技巧两则
- [译]Laravel 5.0 之 ValidatesWhenResolved
- Python机器学习的练习七:K-Means聚类和主成分分析
- [译]Laravel 5.0 之方法注入
- [译]Laravel 5.0 之 Middleware (Filter-Style)
- [译]Laravel 5.0 之目录结构与命名空间
- Python机器学习的练习六:支持向量机
- [译]Laravel 5.0 之路由缓存
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 深入SVM:支持向量机核的作用是什么
- kubernetes(三)之Docker网络详解
- kubernetes(二)之Docker容器及镜像
- 反向传播算法:定义,概念,可视化
- Go语言(二十一) 常见的模块使用
- kubernetes(一)之Docker基础入门
- Go语言(二十)日志采集项目(二)Etcd的使用
- prometheus入门(一)
- Go语言(十九)日志采集项目之logagent开发(一)
- Go语言(十 八)context&日志项目
- 使用梯度上升欺骗神经网络,让网络进行错误的分类
- Go语言(十七) 配置文件库项目
- Python 相对路径问题:“No such file or directory“
- 基于etcd服务发现的overlay跨多宿主机容器网络
- Go语言(十六) 日志项目升级