先来一个基本的例子

<!-- 实现一段脚本，使得点击对应链接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 闭包 事件绑定的更多相关文章

  1. JavaScript利用闭包循环绑定事件

    我们经常在做前端面试题的时候,会遇到循环绑定事件后,输出打印结果,很多人总是搞不清楚,今天借此机会跟大家梳理一下闭包相关作用. 1.首先我们举一个简单的例子. html部分: <a href=& ...

  2. 理解Javascript中的事件绑定与事件委托

    最近在深入实践js中,遇到了一些问题,比如我需要为动态创建的DOM元素绑定事件,那么普通的事件绑定就不行了,于是通过上网查资料了解到事件委托,因此想总结一下js中的事件绑定与事件委托. 事件绑定   ...

  3. JavaScript 中 onload 事件绑定多个方法的优化建议

    页面加载完毕时会触发 onload 事件.基于内容(HTML)要与行为(JavaScript)分离的编码思想,我们需要将一些对页面的初始化操作写在方法内,并通过window.onload = func ...

  4. JavaScript 中 onload 事件绑定多个方法

    当需要调用的方法较多时,我们可以进一步优化,编写一个专门用于绑定 onload事件的方法: function addLoadEvent(func) { //把现有的 window.onload 事件处 ...

  5. jQuery 事件绑定 和 JavaScript 原生事件绑定

    总结一下:jQuery 事件绑定 和 JavaScript 原生事件绑定 及 区别 jQuery 事件绑定 jQuery 中提供了四种事件监听绑定方式,分别是 bind.live.delegate.o ...

  6. JavaScript事件绑定的常见方式

    在Javascript中,事件绑定一共有3种方式: ① 行内绑定 ② 动态绑定 ③ 事件监听 原文: https://mbd.baidu.com/newspage/data/landingsuper? ...

  7. js、jq事件绑定方式总结——以click事件为例

    一.JavaScript点击事件绑定方法 1.1 HTML onclick事件属性 <button onclick="clickMe(this)">click me&l ...

  8. 深入理解JavaScript的闭包特性如何给循环中的对象添加事件

    初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数中(event handler)获取对应的索引.但每次获取的都是最后一次循环的索引.原因是初学者并未理解JavaScript ...

  9. 在Javascript中闭包（Closure)

    在Javascript中闭包(Closure) 什么是闭包 “官方”的解释是:所谓“闭包”,指的是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分. ...

随机推荐

  1. Windows内核之进程的终止和子进程

    1 进程终止的方法: <1>主线程的进入点函数返回(最好使用这种方法) <2>进程中的一个线程调用ExitProcesss函数(应该避免使用这样的方法). <3>还 ...

  2. 关于cocos2d安装时编译不成功（个人心得）

    在解压cocos2d执行vs2010.sln时错误发生不能成功生成.遇到这样的错误: 1>c:\program files\microsoft sdks\windows\v7.0a\includ ...

  3. SQL Server索引进阶：第十五级，索引的最佳实践

    在本文中我们将推荐14条贯穿本系列的规则,这些规则帮助你为数据库创建最好的索引结构. 格式来自于<Framework Design Guidelines>.每条推荐用四个词来总结:Do做, ...

  4. Ueditor和CKeditor 两款编辑器的使用与配置

    一丶ueditor 百度编辑器 1.官方文档,演示,下载地址:http://ueditor.baidu.com/website/index.html 2.百度编辑器的好:Editor是由百度web前端 ...

  5. OOX 面向对象X

    OOA - Object-Oriented Analysis(面向对象分析) OOT - Object-Oriented Testing (面向对象测试) OOP - Object-Oriented ...

  6. Unity5UGUI 官方教程学习笔记（三）UI BUTTON

    Button Interactable :为了避免与该按钮产生交互,可以设置它为false Transition: 管理按钮在正常情况 ,按下,经过时的显示状态  None  按钮整正常工作 但是在按 ...

  7. IO库 8.3

    题目:什么情况下,下面的while循环会终止? while(cin >> i) /* ... */ 解答:当读取发生错误时上述while循环会终止.比如i是整形,却输入非整形的数:输入文件 ...

  8. Apache 编译扩展的方法

    下载源码包 进入源码包的modules目录 选择你要编译的.c文件 eg: /home/work/local/apache/bin/apxs -c -i -a mod_proxy_http.c 选项说 ...

  9. CPUから広がり

    处理技术: 超标量是通过内置多条流水线来同时执行多个处理器,其实质是以空间换取时间.而超流水线是通过细化流水.提高主频,使得在一个机器周期内完成一个甚至多个操作,其实质是以时间换取空间. スター: 真 ...

  10. npm总是安装不成功，而且很慢？

    什么方法解决: 在cmd 里面先运行 npm config set registry "http://registry.npm.taobao.org"  然后再安装npm 就会很快 ...