Geek Answers Handbook

Understanding javascript closure with event handlers

I am very new to javascript, recently, realizing the closure, I came across one question asked by the interviewer: -

function initButtons() {
    var body = document.body,
        button, i;

    for (i = 0; i < 5; i++) {
        button = document.createElement("button");
        button.innerHTML = "Button " + i;
        button.addEventListener("click", function (e) {
            alert(i);
        }, false);
        body.appendChild(button);
    }
}
initButtons();

What will this code output? For which I replied - "The number corresponding to the button .. 1, 2, etc."

Ok, then I googled around and found an answer that stated: -

The reason for this is that when the addEventListener method is called during each iteration of the for loop, a closure is created.

OK, now everything goes above my head ... How is this possible? To be honest enough, I am dumb in javascript and try to learn as much as possible. So I'm going through the basics!

While I also read the details of how-do-javascript-closures-work

+4
2

, , :

button.addEventListener("click", function (e) {
    alert(i);
}, false);

, addEventListener :

  • "click"
  • false

, :

button.addEventListener("click", alert(0), false);
button.addEventListener("click", alert(1), false);
button.addEventListener("click", alert(2), false);
button.addEventListener("click", alert(3), false);
button.addEventListener("click", alert(4), false);

, , . , , :

button.addEventListener("click", function(e){alert(i);}, false);
button.addEventListener("click", function(e){alert(i);}, false);
button.addEventListener("click", function(e){alert(i);}, false);
button.addEventListener("click", function(e){alert(i);}, false);
button.addEventListener("click", function(e){alert(i);}, false);

, :

function(e){
   alert(i);
}

, , . , , , : i? . , , .

, i undefined . , , : . , i - ! i? 5, 5, 5.

, , , , , "". , .

, , , alert , ? , , , , . parens ();.

var one = function(){}      // one contains a function.
var two = (function(){})(); // two contains the result of a function

, , .

:

button.addEventListener("click", (function (e) {
    alert(i);
})(), false);

, 0-4, , .

, . , addEventListener . peasy - , :

(function(i){
   button.addEventListener("click", function (e) {
     alert(i);
   }, false);
})(i);

, (); (i);, i, . , a.k.a. . , ? , . :

button.addEventListener("click", function (e) {
  alert(0);
}, false);
button.addEventListener("click", function (e) {
  alert(1);
}, false);
button.addEventListener("click", function (e) {
  alert(2);
}, false);
button.addEventListener("click", function (e) {
  alert(3);
}, false);
button.addEventListener("click", function (e) {
  alert(4);
}, false);

, , , , , i hardcoded . , . , , . :

  • .
  • , (, -, function newFunc(){}), , .
  • , , ( ... )();

.

+8

function initButtons() {
    var body = document.body, button, i;
    for (i = 0; i < 5; i++) {
        (function(i) {
            button = document.createElement("button");
            button.innerHTML = "Button " + i;
            button.addEventListener("click", function (e) {
                alert(i);
            }, false);
            body.appendChild(button);
        }(i));
    }
}
initButtons();

i, i , , . wrapper/anonymous .

: .

+1

More articles:


All Articles