问题:点击哪个 li,就弹出它的下标
准备
给 body 添加几个 li
<body>
<ul>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
</ul>
</body>
<script>
var li = document.querySelectorAll("li");
var ul = document.querySelector("ul");
</script>
解决方法一:事件委托 * + indexOf
思想:冒泡机制,通过点击子元素,来触发父元素的监听事件
li是个伪数组,把数组的方法给li,然后通过 target 找li数组中的下标
<script>
/*给 ul 添加一个事件委托 */
ul.addEventListener("click",function(e){
var target = e.target;
if(target.nodeName.toLowerCase() === "li"){
console.log(Array.prototype.indexOf.call(li,target));
}
},false);
</script>
var ul = document.querySelector("ul");
var lis = document.querySelectorAll("li");
ul.onclick = function (e) {
//先找点击了谁
var tar = e.target;
//然后转成数组
var arr = Array.from(lis);
//最后输出索引
console.log(arr.indexOf(tar));
};
解决方法二:外部嵌套自调用函数
for (var i = 0, len = li.length; i < len; i++) {
(function (i) {
//注意这儿的参数不要加i
li[i].onclick = function () {
console.log(i);
};
})(i);
}
解决方法三:let(es6)
for (let i = 0, len = li.length; i < len; i++) {
li[i].onclick = function () {
console.log(i);
};
}
引申注意点
- 每个函数都是有 return 的,没有写的话就是
return;