title: JavaScript closure within eventlistener
body: <pre><code>&lt;button&gt;test&lt;/button&gt;
  &lt;button&gt;test&lt;/button&gt;
  &lt;button&gt;test&lt;/button&gt;
  &lt;button&gt;test&lt;/button&gt;
  &lt;button&gt;test&lt;/button&gt;
  &lt;script&gt;
  var nodes = document.getElementsByTagName('button');
  function clicked(i){
      console.log('pass');
  
      // Closure
      // return function(){
      //  console.log(i);
      // }
  
  }
  for (var i = 0; i &lt; nodes.length; i++) {
     nodes[i].addEventListener('click', clicked(i));
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>I am try to have a fully understanding on js closure, the above function add even listener to the buttons. it console log 'pass' 5 times and then does nothing when button clicked. but if i uncomment out the closure bit (return), console.log will echo out the i, but not log 'pass'. I did find relevant answer but i don't get why with closure onclick doesn't log the '<strong>pass</strong>' string when button clicked instead does log out the <strong>i</strong>.</p>
  
  <p><a href="https://stackoverflow.com/questions/111102/how-do-javascript-closures-work?page=1&amp;tab=oldest#tab-top">How do JavaScript closures work?</a></p>