<!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>