javascript closure 闭包事件绑定

先来一个基本的例子

<!-- 实现一段脚本，使得点击对应链接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);
});

javascript closure 闭包 事件绑定

javascript closure 闭包事件绑定