美文网首页
用纯JS实现,点击一个列表时,输出对应的索引

用纯JS实现,点击一个列表时,输出对应的索引

作者: jh2k15 | 来源:发表于2018-05-09 23:36 被阅读0次
<body>
<ul>
    <li>test1</li>
    <li>test2</li>
    <li>test3</li>
    <li>test4</li>
    <li>test5</li>
    <li>test6</li>
    <li>test7</li>
    <li>test8</li>
    <li>test9</li>
    <li>test10</li>
</ul>
<script>
    var lis = document.querySelectorAll('ul li');
    for(var i = 0, len = lis.length; i < len; i++) {
        lis[i].addEventListener('click', function () {
            console.log(i);
        }, false);
    }
</script>
</body>
var lis=document.querySelectorAll('ul li');

for(var i=0 ; i<lis.length; i++){
  (function(i){
  lis[i].addEventListener('click',function(){
    console.log(i);
  },false);
    })(i)
}

闭包保存的是外部变量的引用

var mul=document.querySelectorAll('ul');
var lis=document.querySelectorAll('ul li');


mul[0].addEventListener('click',function(e){
    e=e || window.event;
    var target=e.target || e.srcElement;
    if(target.tagName.toLowerCase() == 'li'){
      console.log([].indexOf.call(lis,target))
    }
});

相关文章

网友评论

      本文标题:用纯JS实现,点击一个列表时,输出对应的索引

      本文链接:https://www.haomeiwen.com/subject/pieorftx.html