經典的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. 使用閉包

	<script type="text/javascript">

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

	function foo(){
		for(var i = 0, len = list.length; i < len; i++){
			var that = list[i];
			list[i].onclick = (function(k){
				var info = that.innerHTML;
				return function(){
					alert(k + "----" + info);
				};
			})(i);
		}
	}
	foo();
	</script>
 

2.使用ES6中的新特性let來宣告變數

用let來宣告的變數將具有塊級作用域，很明顯可以達到要求，不過需要注意的是得加個'use strict'（使用嚴格模式）才會生效

	<script type="text/javascript">

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

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

	</script>
 

3.事件委託

	<script type="text/javascript">

	var myul = document.querySelector('ul');
	var list = document.querySelectorAll('ul li');

	myul.addEventListener('click', function(ev){
		var ev = ev || window.event;
		var target = ev.target || ev.srcElemnt;

		for(var i = 0, len = list.length; i < len; i++){
			if(list[i] == target){
				alert(i + "----" + target.innerHTML);
			}
		}
	});

	</script>

4.引入jquery,使用其中的on或delegate進行事件繫結（它們都有事件代理的特性）

<script type="text/javascript" src="jquery-1.8.2.min.js"></script>

	<script type="text/javascript">

	$("ul").delegate("li", "click", function(){
		var index = $(this).index();
 		var info = $(this).html();
		alert(index + "----" + info);
	});

	</script>

	<script type="text/javascript">

	$("ul").on("click", "li", function(){
		var index = $(this).index();
 		var info = $(this).html();
		alert(index + "----" + info);
	});

	</script>