<body>
<ul>
<li>这是第一行</li>
<li>这是第二行</li>
<li>这是第三行</li>
<li>这是第四行</li>
<li>这是第五行</li>
</ul>
</body>
第一种：
var lis=document.getElementsByTagName("li"); for(var i=0;i<lis.length;i++){ lis[i].index=i; // 给每个li赋一个下标 lis[i].onclick=function(){ alert(this.index+"----"+this.innerHTML); }; }
第二种：
var lis=document.getElementsByTagName("li"); for(var i=0;i<lis.length;i++){ (function(n){ lis[n].onclick=function(){ alert(n+this.innerHTML); }; })(i); }
第三种：
var lis=document.getElementsByTagName("li"); for(var i=0;i<lis.length;i++){ lis[i].onclick=function(n){ return function(){ alert(n+lis[n].innerHTML); }; }(i); }
第四种：
$("ul li").click(function(){
var i=$(this).index();
var text=$(this).text();
alert(i+text);
});
第五种：（事件代理）
var ul=document.getElementsByTagName("ul")[0]; ul.addEventListener("click",clickHandler); function clickHandler(e){ if(e.target.nodeName!=="LI") return; // 或者写 if(e.target.constructor!==HTMLLIElement) return; var arr=Array.from(ul.children); var index=arr.indexOf(e.target); var text=arr[index].innerHTML; console.log(index+text) }
第六种：（jq事件代理）
$(function(){ $("ul").click(function (e) { var target=$(e.target); var index=target.index(); var text=target.text(); console.log(index+text) }); });