`

js事件处理器执行时绑定变量导致的问题

javascript 闭包 
阅读更多

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<body>

<button class="button">1</button>

<button class="button">2</button>

<button class="button">3</button>

<button class="button">4</button>

<button class="button">5</button>

<button class="button">6</button>

<button class="button">7</button>

<button class="button">8</button>

<button class="button">9</button>

<script type="text/javascript">

  var nodes=document.getElementsByTagName("button");

  var clickButton=function(nodes){

 var i;

 for(i=0;i<nodes.length;i++){

           nodes[i].onclick=function(){alert(i);};

 }

 }

 clickButton(nodes);

 

</script>

</body>

</html>

 

由于js事件处理器执行时绑定变量i,导致点击任意按钮，都alert出最后的 i值8；而不是函数构造是i的值；

 

用闭包可解决这个问题，js改为

 

<script type="text/javascript">

  var nodes=document.getElementsByTagName("button");

 

var clickButton2=function(nodes){

     var i;

for(i=0;i<nodes.length;i++){

     nodes[i].onclick=function(){

var e=i;

return function(){alert(e);};

 }();

 

}

};

 

clickButton2(nodes);

</script>

 

便可达到预期效果


 

分享到：
| 回溯法应用之迷宫问题
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Vue.js事件处理器与表单控件绑定详解

    3. 在方法中，可以使用特殊变量`$event`来访问原生DOM事件，便于在事件触发时执行额外的逻辑。 ### 事件修饰器 Vue.js提供了一些事件修饰符，它们以`.`为前缀，添加在v-on指令后。这些修饰符可以控制事件的默认...

    javascrpt绑定事件之匿名函数无法解除绑定问题.docx

    ### JavaScript绑定事件之匿名函数无法解除绑定问题 #### 背景介绍 在JavaScript中，事件绑定是一项非常重要的功能，它允许我们通过监听特定的用户交互或其他触发条件来执行相应的代码逻辑。然而，在实践中，有时候...

    javascript阻止事件冒泡的一种方法

    JavaScript中的事件冒泡是事件处理的一个重要概念，它是指事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上转播至最不具体的节点（文档）的过程。这个机制允许事件在事件流的每个阶段都...

    javascript闭包传参和事件的循环绑定示例探讨

    问题的核心在于JavaScript中的变量作用域，以及事件监听器是异步执行的，但循环的变量会提升至全局作用域。 标签中的关键词"JavaScript 闭包传参 循环绑定"，则提示了文章将围绕这三个概念展开探讨。 现在我们来...

    Vue方法与事件处理器详解

    Vue.js 是一个流行的前端JavaScript框架，用于构建用户界面。它提供了丰富的特性，其中包括方法和事件处理器，这使得处理用户交互变得更加简单。在这个话题中，我们将深入探讨Vue中的方法与事件处理器，以及它们如何...

    form自动绑定demo

    1. **创建Ajax请求**：使用JavaScript创建一个新的XMLHttpRequest对象，并设置其onreadystatechange事件处理器，以便在服务器响应时执行特定函数。 2. **发送请求**：调用XMLHttpRequest对象的open()方法指定请求...

    Vue.js学习课程 共32节课，附源码

    事件处理器 表单控件绑定 表单复选框 表单单选按钮 表单下拉框 表单修饰符 组件：基础的基础 组件：局部的组件 组件：表行组件 组件：数据 组件：传递数据 组件：传递变量 组件：参数验证 组件：事件传递 组件：slot...

    浅谈JavaScript之事件绑定

    然而，这种方法虽然解决了问题，但当按钮数量很大时，由于每个按钮都绑定了单独的事件处理器，可能会导致性能下降。为了优化，我们可以采用事件委托（Event Delegation）的策略。事件委托利用事件冒泡的原理，将事件...

    Javascript动态绑定事件的简单实现代码

    因此，当事件处理函数被执行时，变量i的值是循环结束后的最终值，而不是绑定事件时的索引值。这就是为什么在for循环绑定事件后点击各个li元素时，弹出的总是“你点击了第5项”。 4. 使用立即执行函数表达式（IIFE）...

    JQuery在循环中绑定事件的问题详解

    - 避免在循环中直接进行事件绑定，而是要通过传递额外的数据来解决闭包导致的变量作用域问题。 - 在循环体中声明独立的函数，而不要使用匿名函数，这样可以更清晰地管理数据和作用域。 文档提供了一个示例，展示...

    js 索引下标之li集合绑定点击事件

    这里需要特别注意的是，由于JavaScript的事件处理器会在事件触发时才执行，此时的变量i已经是循环结束后的值。在匿名函数中使用的是同一个i，因此所有li元素最终都会显示循环结束后的索引值，即最后一个元素的索引。...

    js事件绑定快捷键以ctrl+k为例

    本文将介绍如何使用JavaScript（简称js）为快捷键绑定事件，以CTRL+K作为快捷键的示例。 首先，我们需要了解HTML中的事件监听和处理机制。在JavaScript中，事件监听可以通过多种方式实现，包括使用内联事件处理器、...

    css文件中的样式类被覆盖，js文件中的变量未定义问题

    - 当一个JS文件试图访问另一个尚未加载或执行的JS文件中定义的变量时，就会出现变量未定义的错误。 - 如果变量定义在函数内部，而另一个JS文件试图在该函数外部访问该变量，也会导致未定义错误。 2. **解决方法**...

    jQuery为动态生成的select元素添加事件的方法

    但是，对于动态生成的元素，传统的事件绑定方法可能不会生效，因为当JavaScript代码执行时这些元素可能还不存在。 3. jQuery中的事件委托技术：为了解决动态元素的事件处理问题，jQuery引入了一种名为“事件委托”...

    JS完成代码前最好对其做5件事

    在大型应用中，事件处理器的数量可能非常庞大，如果为每一个需要交互的元素都绑定一个独立的事件处理器，会消耗大量内存。因此，建议尽量重用事件处理器，即在合适的范围内通过事件委托的方式来处理事件。在上述代码...

    JavaScript闭包函数访问外部变量的方法

    第二个例子是通过绑定事件处理器的方式，来观察在循环中创建的闭包是如何引用变量的。在这两个例子中，我们都可以发现一个共同的问题，那就是如果简单地引用外部变量，闭包最终返回的都是变量的最终值。而通过匿名...

    把多个JavaScript函数绑定到onload事件处理函数上的方法

    当开发者需要绑定多个函数到onload事件上时，通常会遇到一些问题，比如只能绑定一个函数到单一事件处理器上的限制。本文将详细介绍几种方法来解决这个问题，以及如何优雅地将多个JavaScript函数绑定到onload事件上。...

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

    在描述中，作者指出了一个常见的误区，即在for循环中为DOM节点注册事件时，由于闭包的特性，导致了事件处理器绑定到了不期望的值。作者解释说，在循环过程中，变量i的引用被保存在了事件处理器中，而当事件处理器被...

    详解Vue 方法与事件处理器

    我们可以使用`v-on`指令将事件处理器绑定到DOM元素上，如`&lt;button&gt;`，通过`v-on:click`指令调用`greet`方法。 内联语句处理器是另一种常见的方式，它允许我们在模板中直接插入JavaScript表达式。例如： ```html ('...

Magicbox
Global site tag (gtag.js) - Google Analytics