标签：种类 版本 amp span 试题 eve 获取 cti net
2020-12-08
方法一：
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()) }); });
参考：https://blog.csdn.net/web_j/article/details/83900073?utm_medium=distribute.pc_relevant.none-task-blog-title-2&spm=1001.2101.3001.4242
JS如何给ul下的所有li绑定点击事件，点击使其弹出下标和内容
标签：种类 版本 amp span 试题 eve 获取 cti net
原文地址：https://www.cnblogs.com/zhangchao0515/p/14101206.html
