先来一个基本的例子
<!-- 实现一段脚本，使得点击对应链接alert出相应的编号 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<body>
<a href='#'> 第一个链接 </a> </br>
<a href='#'> 第二个链接 </a> </br>
<a href='#'> 第三个链接 </a> </br>
<a href='#'> 第四个链接 </a> </br>
<script type="text/javascript">
var lis = document.links;
for(var i = 0, length = lis.length; i < length; i++) {
(function(i) {
lis[i].onclick = function() {
alert(i + 1);
};
})(i);
}
</script>
</body>
使用addEventListener
<!DOCTYPE html> <html> <head> <meta name="description" content="[closure click ex]"> <meta charset="utf-8"> <title>JS Bin</title> </head> <body> <a href='#' id="a0"> 第一个链接 </a> </br> <a href='#' id="a1"> 第二个链接 </a> </br> <a href='#' id="a2"> 第三个链接 </a> </br> <a href='#' id="a3"> 第四个链接 </a> </br> </body> <script> var links = document.querySelectorAll('body>a'); // links.forEach(function(ele,idx){ //这是一个NodeList 是ArrayLike对象 不是真正的数组 是不能forEach的 // }); for (var i = links.length - 1; i >= 0; i--) { links[i].addEventListener('click', (function(idx){ return function(e){ console.log(idx + ' ' + e.target.id); }; })(i), false); }; </script> </html>
此题也可以不使用闭包来实现
//另外一种使用事件代理的方式 //没有使用闭包 var ul = document.querySelector('#ul1'); var lis = document.querySelectorAll('#ul1 .li-ele'); var lisArr = []; for( i= 0; i< lis.length; i++){ lisArr.push(lis[i]); } //PS 注意 不能直接用lis.indexOf //它是 NodeList 是类数组 没有 indexOf 方法 ul.addEventListener('click', function(e){ var target = e.target; console.log(lisArr.indexOf(target)); }, false);
=========更新==========
然而上面的方式还是太笨了 下面这个既可以不用闭包也可以绑定上对应的事件
var doc = document;
var list = doc.querySelectorAll('ul li');
[].forEach.call(list, function(ele, index){
ele.addEventListener('click', function(){
console.log(index);
}, false);
});