title: onmouseover doesn't work when using javascript to add img tag on IE
body: <p>I need some javascript code that dynamically adds an img tag to a div, and the img tag needs onmouseover and onmouseout handlers.</p>
  
  <p>I have it working on Firefox.  But it doesn't quite work on IE.  On IE, the img tag is added, but the onmouseover and onmouseout handlers are not active.</p>
  
  <p>Here's the code:</p>
  
  <pre><code>&lt;body&gt;  
      &lt;div id='putImageHere' /&gt;  
  
      &lt;script type='text/javascript'&gt;
          var node = document.getElementById('putImageHere');
          var img = document.createElement('img');
          img.setAttribute('src', 'http://sstatic.net/so/img/logo.png');
          node.appendChild(img);
  
          // first attempt, which works on Firefox but not IE
          img.setAttribute('onmouseover', "alert('mouseover')");
          img.setAttribute('onmouseout', "alert('mouseout')");
  
          // second attempt, which I thought would work on IE but doesn't
          img.addEventListener('mouseover', function() { alert('mouseover') }, false);
          img.addEventListener('mouseout', function() { alert('mouseout') }, false);
      &lt;/script&gt;  
  &lt;/body&gt;  
  </code></pre>