方式有好几种,如下;
1使用闭包;
var ul = document.getElementsByTagName("ul")[0]; var list = ul.getElementsByTagName("li"); function foo(){ for(var i = 0, len = list.length; i < len; i++){ var that = list[i]; list[i].onclick = (function(k){ var info = that.innerHTML; return function(){ alert(k + "----" + info); }; })(i); } } foo();
2使用事件代理;
var ul = document.querySelector('ul'); var list = document.querySelectorAll('ul li'); ul.addEventListener('click', function(ev){ var ev = ev || window.event; var target = ev.target || ev.srcElemnt; for(var i = 0, len = list.length; i < len; i++){ if(list[i] == target){ alert(i + "----" + target.innerHTML); } } });
3引入jQuery,使用其中的on或delegate进行事件绑定(它们都有事件代理的特性);
// delegate方法 $("ul").delegate("li", "click", function(){ var index = $(this).index(); var info = $(this).html(); alert(index + "----" + info); }); // on方法 $("ul").on("click", "li", function(){ var index = $(this).index(); var info = $(this).html(); alert(index + "----" + info); });
4使用ES6中的新特性let来声明变量;
var ul = document.getElementsByTagName("ul")[0]; var list = ul.getElementsByTagName("li"); function foo(){'use strict' for(let i = 0, len = list.length; i < len; i++){ list[i].onclick = function(){ alert(i + "----" + this.innerHTML); } } } foo();
需要注意的是,用let来声明的变量将具有块级作用域(可以理解{}作为块级作用域的切割符号),很明显可以达到要求,不过需要注意的是得加个'use strict'(使用严格模式)才会生效。
使用jquery,可以用$(this).index()来取到li的index;
原文:https://segmentfault.com/q/1010000008557139?_ea=1680527