title: iframe behaviour of onload vs addEventListener('load')
body: <p>I've been playing around with adding hidden iframe elements to a page, and I want to manipulate the DOM of the these once loaded. I've noticed that I can't start manipulating the DOM immediately after adding the iframe to a page since it hasn't loaded yet. This can't be done with the <code>DOMContentLoaded</code> event since that fires against the document which doesn't exist in the iframe until it is added to the page, so we have to use the <code>load</code> event.</p>
  
  <p>Here is some test code:</p>
  
  <pre><code>var iframe = document.createElement('iframe');
  iframe.onload = function() { console.log('loaded!'); };
  document.getElementsByTagName('body')[0].appendChild(iframe);
  </code></pre>
  
  <p>This works as expected, however when I change it to <code>addEventListener</code> it doesn't even get added to the DOM:</p>
  
  <pre><code>var iframe = document.createElement('iframe');
  iframe.addEventListener('load', function() { console.log('loaded!'); });
  document.getElementsByTagName('body')[0].appendChild(iframe);
  </code></pre>
  
  <p>I haven't tested <code>attachEvent</code> in IE.</p>
  
  <p>Anyone shed any light on this?</p>