分析js闭包引起的事件注册问题_javascript技巧-js教程-PHP中文网

首页

web前端

js教程

分析js闭包引起的事件注册问题_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:07 PM

js 闭包

背景：闲暇时间看了几篇关于js作用域链与闭包的文章，偶然又看到了之前遇到的一个问题，就是在for循环中为dom节点注册事件驱动，具体见下面代码：

<!DOCTYPE html>
<html>
 <head>
 <title>js闭包</title>
 <meta charset="utf-8" />
 </head>
 <body>
 <button id="anchor1">1</button>
 <button id="anchor2">2</button>
 <button id="anchor3">3</button>
 <script type="text/javascript" src="jquery-1.12.1.js"></script>
 <script type="text/javascript">
  function pageLoad(){
  for (var i = 1; i <=3; i++) { 
   var anchor = document.getElementById("anchor" + i);
   anchor.onclick = function () {
   console.log("anchor"+i);
   } 
  } 
  } 
  window.onload = pageLoad; 
 </script>
 </body>
</html>

登录后复制

按照正常的想法，结果应该是点击3个按钮分别提示“anchor1”、“anchor2”、“anchor3”；期初我也是这么认为的，但是结果却是不管点击哪个按钮，都会提示“anchor4”。

这是为什么呢？不要着急，待我们慢慢分析，这里面包含js作用域链与闭包的知识，在这里我就不详细介绍了。

首先我们看这个anchor.onclick，这是什么？这是dom0级事件处理程序啊，废话，我也知道，博主是蛇精病吗*************不要吵了，我想说的是这个anchor.onclick

是一个事件处理程序的声明，就像var name="小明"一样，这是声明了，但是还没有执行，这就是关键，我们将上面的js代码修改一下再来看看：

function pageLoad(){
  for (var i = 1; i <=3; i++) { 
  var anchor = document.getElementById("anchor" + i);
   anchor.onclick = function () {
   console.log("anchor"+i);
   } 
   if(i==2){
   debugger;//我们在这里debugger一下，然后在控制台手动触发#anchor1和#anchor2的点击事件
   }
  } 
 } 
 window.onload = pageLoad;

登录后复制

看到了吧，我们通过debugger让循环在i==2时停止，然后又去控制台手动触发#anchor1和#anchor2的点击事件，结果控制台打印“anchor2”。

整个的逻辑大致是这样的：anchor.onclick一直保存着i的引用，i在循环中是一直变化的，从i=1到i=4；虽然在循环的过程中，anchor.onclick曾经保存过（注意“曾经”两字），

1,2,3这三种情况，但是i最终变成了4，所以说，无论点击哪个按钮，都会输出“anchor4”

以上就是本文的全部内容，希望对大家的学习有所帮助。

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7369

Java教程

1628

CakePHP 教程

1355

Laravel 教程

1266

PHP教程

1215

显示更多

Related knowledge

推荐：优秀JS开源人脸检测识别项目 Apr 03, 2024 am 11:55 AM

人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属，在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别，大大缩短了用户等待时间，提高了用户体验；弱势是：受到模型大小限制，其中准确率也有限。如何在web端使用js实现人脸检测呢？为了实现Web端人脸识别，需要熟悉相关的编程语言和技术，如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是，由于Web端的计

C++ lambda 表达式中闭包的含义是什么？ Apr 17, 2024 pm 06:15 PM

在C++中，闭包是能够访问外部变量的lambda表达式。要创建闭包，请捕获lambda表达式中的外部变量。闭包提供可复用性、信息隐藏和延迟求值等优势。它们在事件处理程序等实际情况中很有用，其中即使外部变量被销毁，闭包仍然可以访问它们。

C++ Lambda 表达式如何实现闭包？ Jun 01, 2024 pm 05:50 PM

C++Lambda表达式支持闭包，即保存函数作用域变量并供函数访问。语法为[capture-list](parameters)->return-type{function-body}。capture-list定义要捕获的变量，可以使用[=]按值捕获所有局部变量，[&]按引用捕获所有局部变量，或[variable1,variable2,...]捕获特定变量。Lambda表达式只能访问捕获的变量，但无法修改原始值。

C++ 函数中闭包的优点和缺点是什么？ Apr 25, 2024 pm 01:33 PM

闭包是一种嵌套函数，它能访问外层函数作用域的变量，优点包括数据封装、状态保持和灵活性。缺点包括内存消耗、性能影响和调试复杂性。此外，闭包还可以创建匿名函数，并将其作为回调或参数传递给其他函数。

解决闭包导致的内存泄漏问题 Feb 18, 2024 pm 03:20 PM

标题：闭包引起的内存泄漏及解决方法引言：闭包是JavaScript中一个非常常见的概念，它可以让内部函数访问外部函数的变量。然而，闭包在使用不当的情况下可能导致内存泄漏。本文将探讨闭包引起的内存泄漏问题，并提供解决方法及具体代码示例。一、闭包引起的内存泄漏问题闭包的特性是内部函数可以访问外部函数的变量，这意味着在闭包中引用的变量不会被垃圾回收。如果使用不当，