Unexpected reference to variable in anonymous function
<p>The following JavaScript has some unwanted behaviour:</p>

<pre><code>&lt;html&gt;
&lt;script&gt;
  function AddEventListener(el, listener)
  {
    el.addEventListener ? el.addEventListener('click', listener) : 
                          el.attachEvent('onclick', listener);
  }

  function Init(parent) 
  {
    var span = document.createElement("span");
    span.innerText = "Span1";

    AddEventListener(span, function() { alert(span.innerText); } ); 
    parent.appendChild(span);
    var span = document.createElement("span");

    span.innerText = "Span2";
    parent.appendChild(span);
  }
&lt;/script&gt;
&lt;body onload="Init(document.getElementById('drop'));"&gt;
  &lt;div id='drop'&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>If you click on <code>Span1</code>, <code>Span2</code> is shown in the alert window. I understand why: javascript variable scope. But I don't know how to solve it.</p>

<p>Some context: I used <code>this.innerHTML</code> which works fine except in IE8. <code>this</code> points to the window in IE8, not to the parent of the event listener.</p>
