<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <ul id='ul'> <li>点我啊</li> <li>点我啊</li> <li>点我啊</li> <li>点我啊</li> <li>点我啊</li> </ul> </body> <script> // 第一种 var ul = document.getElementById('ul') ul.addEventListener('click',function(e) { var lis = ul.getElementsByTagName('li') for (let i = 0; i < lis.length; i++ ) { if (e.target == lis[i]) { alert(i+1) } } }) // 第二种 // var lis = document.getElementsByTagName('li') // for (var i = 0; i < lis.length; i++) { // lis[i].onclick = function (i) { // return function() { // alert(i+1) // } // }(i) // } // 第三种 // var lis = document.getElementsByTagName('li') // for (var i = 0; i < lis.length; i++) { // (function (i) { // lis[i].onclick = function () { // alert(i+1) // } // })(i) // } // 第四种 // var lis = document.getElementsByTagName('li') // for (let i = 0; i < lis.length; i++) { // lis[i].onclick = function () { // alert(i+1) // } // } // 第五种 // var lis = document.getElementsByTagName('li') // var liArr = [].slice.call(lis) // liArr.forEach((item,index) => { // item.onclick = function() { // alert(index+1) // } // }); // 第六种 // var lis = document.getElementsByTagName('li') // function show(i) { // this.onclick = function() { // alert(i+1) // } // } // for (var i = 0; i < lis.length; i++) { // show.call(lis[i],i) // } // 第七种 // var lis = document.getElementsByTagName('li') // for (let i = 0; i < lis.length; i++) { // lis[i].index = i // lis[i].onclick = function () { // alert(this.index+1) // } // } //第八种 // var lis = document.getElementsByTagName('li') // for (let i = 0; i < lis.length; i++) { // lis[i].setAttribute('data-index',i+1) // lis[i].onclick = function (e) { // alert(e.target.dataset.index) // } // } // 第九种 // var ul = document.getElementById('ul') // var lis = ul.getElementsByTagName('li') // lis = [].slice.call(lis) // ul.addEventListener('click',function(e) { // alert(lis.indexOf(e.target)+1) // }) </script> </html> 