先来一个基本的例子

<!-- 实现一段脚本，使得点击对应链接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. 通过案例掌握Spring 管理事务的步骤及配置

    案例描述  通过完成生成订单业务,掌握事务处理.  需要d_order表和d_item表  订单生成时的业务逻辑:向d_order插入1条数据的同时,向t_item中插入若干条数据  这就是一个独立的 ...

  2. 简单C#文字转语音

    跟着微软走妥妥的,C#文字转语音有很多参数我就不说了,毕竟我也是初学者.跟大家分享最简单的方法,要好的效果得自己琢磨喽: 先添加引用System.Speech程序集: using System; us ...

  3. eclipse 修改编码

    在Eclipse的开发使用中,我们经常使用的是UTF-8,但是刚刚安装的或者是导入的项目是其他编码的默认是GBK的,这就造成我们的项目乱码,一些中文解析无法查看,对我们的开发造成不便. 工具/原料 E ...

  4. SlidingMenu侧边菜单

    第一步.首先在你项目中创建一个包存放侧边菜单的类:

  5. decimal类型不能为空，自定义update更新null值的问题。

    if (!string.IsNullOrEmpty(yt_time_limit_1)) { entity["yt_time_limit_1"] = Convert.ToDecima ...

  6. Nio Client

    public class NIOClient { static int SIZE = 2; final static int bufferSize = 500 * 1024; static InetS ...

  7. IO库 8.2

    题目:编写一个测试函数,将cin作为参数传入. #include <iostream> using std::istream; istream& func(istream& ...

  8. 关于eclipse（64位）下aptana插件安装报错问题解决

    最近一直没有写过js,换了新电脑以后,eclipse下的aptana插件也没有装过,这几天要写js想重新把aptana装上,但是不知怎的,link方式.在线安装方式还有离线包下载下来利用eclipse ...

  9. classpath的总结

    转自:http://blog.csdn.net/javaloveiphone/article/details/51994268   版权声明:本文为博主原创文章,未经博主允许不得转载. 1.src不是 ...

  10. eclipse run on server 浏览器启动设置