javascript closure 闭包 事件绑定

时间：2023-12-31 10:31:08

先来一个基本的例子

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

});

　　

相关文章