码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2020-12-14 13:04:22      阅读:8      评论:0      收藏:0      [点我收藏+]

标签:种类   版本   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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!