经典的js问题 实现点击li能够弹出当前li索引与innerHTML的函数

经典的js问题  实现点击li能够弹出当前li索引与innerHTML的函数

点击其中一项需要alert出如下结果：

按照我们平常的想法，代码应该是这样写的：

var myul = document.getElementsByTagName("ul")[0];
	var list = myul.getElementsByTagName("li");

	function foo(){
		for(var i = 0, len = list.length; i < len; i++){
			list[i].onclick = function(){
				alert(i + "----" + this.innerHTML);
			}
		}
	}
	foo();

但是不巧的是产生的结果是这样的：

索引index为什么总是4呢，这是js中没有块级作用域导致的。这里有三种解决思路

1. 使用闭包

2.使用ES6中的新特性let来声明变量

用let来声明的变量将具有块级作用域，很明显可以达到要求，不过需要注意的是得加个'use strict'（使用严格模式）才会生效

3.事件委托

4.引入jquery,使用其中的on或delegate进行事件绑定（它们都有事件代理的特性）