JS如何给ul下的所有li绑定点击事件，点击使其弹出下标和内容

爱被打了一巴掌 2022-04-18 06:26 276阅读 0赞

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

方法一：

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); 
    
    　　　　}
    
       }

方法二：

方法三：

方法四：

$("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())
            });
        });