zoukankan html css js c++ java

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);
});

查看全文

相关阅读:
Permission denied (publickey). SSH用户名密码登录报错
 git工作流(Gitflow/gitlab代码权限管理)
Spring多数据源配置(2)[PageHelper插件下应用bug修复]
Spring多数据源配置
 基于Redis实现分布式锁
 .NetCore Autofac依赖注入获取注册后的实例、全局容器获取
 C++注入记事本升级版，给记事本弄爱心
 C++注入记事本
 WINAPI实现简易扫雷游戏
 .net 公共基础类

原文地址：https://www.cnblogs.com/cart55free99/p/3624489.html

javascript closure 闭包 事件绑定

javascript closure 闭包事件绑定