title: JavaScript add events cross-browser function implementation: use attachEvent/addEventListener vs inline events
body: <p>In order to add events we could use this simple <strong>first solution</strong>:</p>
  <pre><code>function AddEvent(html_element, event_name, event_function) 
  {       
     if(html_element.attachEvent) //Internet Explorer
        html_element.attachEvent(&quot;on&quot; + event_name, function() {event_function.call(html_element);}); 
     else if(html_element.addEventListener) //Firefox &amp; company
        html_element.addEventListener(event_name, event_function, false); //don't need the 'call' trick because in FF everything already works in the right way          
  } 
  </code></pre>
  <p>or this <strong>second solution</strong> (that adds inline events):</p>
  <pre><code>function AddEvent(html_element, event_name, event_function) 
  {       
     var old_event = html_element['on' + event_name];
     if(typeof old_event !== 'function')
        html_element['on' + event_name] = function() { event_function.call(html_element); };
     else
        html_element['on' + event_name] = function() { old_event(); event_function.call(html_element); };
  }
  </code></pre>
  <p>These are <strong>both cross-browsers</strong> and can be used in this way:</p>
  <pre><code>AddEvent(document.getElementById('some_div_id'), 'click', function() 
  {             
     alert(this.tagName); //shows 'DIV'
  });  
  </code></pre>
  <p>Since I have the feeling <code>attachEvent/addEventListener</code> are used more around in events handling implementations, I'm wondering:</p>
  <p><strong>Are there any disadvantages/drawbacks against using the second solution that I might better be aware of?</strong></p>
  <p>I can see two, but I'm interested in more (if any):</p>
  <ol>
  <li>the second solution screws up innerHTML of elements by adding events inline</li>
  <li>Using second solution I can easily remove all functions associated with a certain event type (<code>html_element['on' + event_name] = null</code>), but I can not use <code>detachEvent/removeEventListener</code> to remove exactly a specific function.</li>
  </ol>
  <p>Any answers like: &quot;use jQuery&quot; or any other framework are pointless!</p>