title: A method of attaching event listener, supported by all major web browsers
body: <p>I need to write a piece of code that will attach a listener to selected event, and that will work in any popular browser, in any version of it. After doing some searching I came out with following function:</p>
  <pre><code>function addListener(event, thefunction)
  {
      if(window.addEventListener)
      {
          //All browsers, except IE before version 9.
          window.addEventListener(event, thefunction, false);
      } 
      else if(window.attachEvent)
      {
          //IE before version 9.
          window.attachEvent(event, thefunction);
      }
  }
  </code></pre>
  <p>Quite simple and seems to be self-explanatory.</p>
  <p>There might be some problem with <code>DOMContentLoaded</code> event, as none version of IE (AFAIK) does recognizes it, and developers are obligated to use <code>onreadystatechange</code> instead. Solving this problem also seems to be fairly simple, until Internet Explorer 9. You had to write only an extra line in <code>else if(window.attachEvent)</code>:</p>
  <pre><code>event = (event == 'DOMContentLoaded') ? 'onreadystatechange' : &quot;on&quot; + event;
  </code></pre>
  <p>This part was always fired in any version of Internet Explorer and this line provided a simple translation of event name, so a correct one was always used.</p>
  <p>But what about Internet Explorer 9 (and above)? In which Microsoft decided that it will drop <code>attachEvent</code> in favor of <code>addEventListener</code>. But doesn't changed <code>onreadystatechange</code> into <code>DOMContentLoaded</code>.</p>
  <p>I can't use above line in <code>window.addEventListener</code> part, because this will rewrite <code>DOMContentLoaded</code> into <code>onreadystatechange</code> event even for other browsers and fail there, as they use <code>DOMContentLoaded</code>.</p>
  <p>So, does the only way to solve this problem, is to add browser detection (type and version) to <code>window.addEventListener</code> part and if it detects that script is dealing with IE 9 or above, it will rewrite event name from <code>DOMContentLoaded</code> to <code>onreadystatechange</code> (and supplement other events name with <code>on</code>, required for IE), and in case of other browsers, will leave event name not changed?</p>
  <p>Or maybe I'm wrong, because as I just tested, neither <code>DOMContentLoaded</code> nor <code>onreadystatechange</code> is being fired in my IE 8 (first one fires correctly in Firefox / Chrome).</p>
  <p>And what about jQuery's <code>.on()</code> function (or similar)? Does anyone knows, if it supports cross-browser attaching of <code>DOMContentLoaded</code>, so I can be sure that this specific kind of event will be catch by my script, no matter, in which browser or it's version I'm using?</p>