Why Do JavaScript Loops Create Unexpected Behavior When Binding Event Handlers?

Understanding the Infamous JavaScript Loop Issue

In JavaScript, a common issue arises when using a loop to generate elements and bind them to event handlers. The following code exemplifies this problem:

function addLinks() {
    for (var i=0, link; i<5; i++) {
        link = document.createElement("a");
        link.innerHTML = "Link " + i;
        link.onclick = function () {
            alert(i);
        };
        document.body.appendChild(link);
    }
}

This code is intended to generate 5 links, each displaying its own index upon clicking. However, when clicked, all links will display "link 5." This anomaly stems from the closure mechanism in JavaScript.

In the first snippet, the inner function defined within the loop's event handler maintains a reference to the variable i. However, after the loop completes, i assumes the value of 5. Consequently, when the event handlers invoke alert(i), the value of i is always 5, resulting in the incorrect behavior.

In the second code snippet, this issue is resolved by enclosing the inner function in an immediately invoked function expression (IIFE):

link.onclick = function (num) {
    return function () {
        alert(num);
    };
}(i);

The IIFE ensures that a new instance of the inner function is created for each iteration, thereby preserving the desired value of i within its scope. When the event handler executes, it alerts the correct index using the captured value of i from the IIFE.

Alternatively, a more efficient approach is to assign the current value of i directly to a property of the DOM node, enabling easy access during the event handler's execution:

link.i = i;
link.onclick = function () {
    alert(this.i);
};

This solution eliminates the need for creating new function objects for each link.

The above is the detailed content of Why Do JavaScript Loops Create Unexpected Behavior When Binding Event Handlers?. For more information, please follow other related articles on the PHP Chinese website!