先来一个基本的例子

<!-- 实现一段脚本，使得点击对应链接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. docker private registry使用

    一.搭建harbor: 步骤:略 二.命令行操作: 登录:docker login docker01 tag image: tag 一个 image,名称一定要标准( registryAddress[ ...

  2. Canvas标签初探

    学了一点基础知识,感觉好神奇,全部练习代码 <html> <head> <meta http-equiv=Content-Type content="text/ ...

  3. Nodejs解析HTML网页模块 jsdom

    工作需要抓取某些网页,所以今天试用下了node下的jsdom模块.同样功能的还有jquery jsdom https://npmjs.org/package/jsdom API很简单. jsdom.e ...

  4. Android屏幕适配与切图_汇总

    首先和最后,还是先看好官方文档:http://developer.android.com/guide/practices/screens_support.html 对应的翻译blog有牛人做了:And ...

  5. node中的get请求和post请求的不同操作【node学习第五篇】

    获取get的请求内容 /** * Created by Administrator on 2016/8/5. */ var http = require("http"); var ...

  6. Apache与Nginx优缺点比较

    本文来源:收集.整理自互联网 1.nginx相对于apache的优点:  轻量级,同样起web 服务,比apache 占用更少的内存及资源  抗并发,nginx 处理请求是异步非阻塞的,而apache ...

  7. 一周学会Mootools 1.4中文教程:(5)Ajax

    ajax在我们前台的开发中是非常重要的,所以我们单独拿出一节课来讲述,首先我们看一下mootools的ajax构成 语法: var myRequest=new Request([参数]); 参数: u ...

  8. poj 2688 Cleaning Robot bfs+dfs

    题目链接 首先bfs, 求出两两之间的距离, 然后dfs就可以. #include <iostream> #include <cstdio> #include <algo ...

  9. python一些模块的exe安装包在windows的64位系统里识别不到已安装Python目录的解决方法

    在windows里安装python一些模块时候,有时候源码安装比较困难,pip install也各种报错,这时候最喜欢用别人编译好的exe或者whl文件来安装,但是在windows的64位系统里,如果 ...

  10. C语言复合梯形公式实现定积分

    假设被积函数为   f x ,积分区间为   , a b ,把区间   , a b 等分成 n 个小区间, 各个区间的长度为 h ,即   / h b a n   ,称之为“步长” ...