title: why undefined in the function of addEventListener?
body: <p>I'm trying to add a <code>mouseenter</code> event listener to elements to change their childnodes' opacity. I use <code>for</code> to add the listener, and can output the childnodes properly, but in the function it's "undefined". I have no idea why.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;article class="index-image-article rel"&gt;
      &lt;section class="index-image-info"&gt;
          // some elements
       &lt;/section&gt;
       &lt;div class="index-image-excerpt mask table"&gt;
           // some elements
       &lt;/div&gt;
  &lt;/article&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>var indexImageArticle = document.querySelectorAll(".index-image-article");
  var indexImageInfo = document.querySelectorAll(".index-image-info");
  var indexImageExcerpt = document.querySelectorAll(".index-image-excerpt");
  
  for(var i = 0; i &lt; indexImageArticle.length; i++) {
      console.log(indexImageInfo[i]); // output properly
      indexImageArticle[i].addEventListener("mouseenter", function() {
          indexImageInfo[i].style.opacity = 1;
          indexImageExcerpt[i].style.opacity = 0;
      });
  }
  </code></pre>
  
  <p>the output of <code>console.log</code> is:</p>
  
  <pre><code>&lt;section class=​"index-image-info"&gt;​…​&lt;/section&gt;​
  &lt;section class=​"index-image-info"&gt;​…​&lt;/section&gt;​
  &lt;section class=​"index-image-info"&gt;​…​&lt;/section&gt;​
  &lt;section class=​"index-image-info"&gt;​…​&lt;/section&gt;
  </code></pre>
  
  <p>and the error:</p>
  
  <p><code>Uncaught TypeError: Cannot read property 'style' of undefined(anonymous function)</code></p>
  
  <p>​the <code>undefined</code> point to the <code>indexImageInfo[i]</code></p>