Why Do Event Handlers in JavaScript Loops Need Closures?

Event Handlers within JavaScript Loops: The Need for Closures

In JavaScript, when working with event handlers within loops, it can be necessary to implement closures to ensure proper parameter passing. Consider the following code:

<code class="javascript">for (var i = 0; i < blah.length; i++) {
  var select = document.createElement('select');
  select.onchange = function() {
    onStatusChanged(select, callid, anotherid);
  };
}

In this scenario, when the onchange event fires, the values passed to onStatusChanged() are consistent across all elements, despite the fact that callid and anotherid should have distinct values for each iteration of the loop.

This occurs because JavaScript event handlers create closures, and the references to callid and anotherid within the function refer to the final value after the loop completes. To resolve this issue, a closure is needed to capture the current values of the parameters during each iteration.

Implementing Closures for Parameter Passing

To copy the values of the parameters during each iteration, implement a closure as follows:

<code class="javascript">for (var i = 0; i < blah.length; i++) {
  var select = document.createElement('select');
  select.onchange = function(s, c, a) {
    return function() {
      onStatusChanged(s, c, a);
    };
  }(select, callid, anotherid);
}

In this updated code:

• A closure is created using the self-executing function return function() { }
• The event handler function accepts three arguments as parameters: s (the

element), c (the current callid), and a (the current anotherid)

The closure immediately calls the function, passing in the current values of s, c, and a

When the onchange event fires, the closures execute, ensuring that onStatusChanged() receives the correct values for each element's iteration.

The above is the detailed content of Why Do Event Handlers in JavaScript Loops Need Closures?. For more information, please follow other related articles on the PHP Chinese website!

JavaScript for select using Event copy function this issue

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How can I change the content of a div with jQuery?Next article：How can I change the content of a div with jQuery?

Related articles

See more

• An in-depth analysis of the Bootstrap list group component
• Detailed explanation of JavaScript function currying
• Complete example of JS password generation and strength detection (with demo source code download)
• Angularjs integrates WeChat UI (weui)
• How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills

• Home

• Course

• Q&A

• My

• Home
• Course
• Article
• Q&A
• Dictionary
• Manual
• Download
• Topic

Home

Article

Q&A

Course

Topic

Download

Game

Dictionary

简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）