title: addEventListener to simple directive example in AngularJS
body: <p>Trying to get <a href="http://codepen.io/softwareeveryday/pen/beBxmp" rel="noreferrer">this</a> very basic directive example to work. From some investigation, 'elem' seems to be an object of <strong>HTMLHeadingElement</strong> (which inherits from Element). Not sure why <strong>elem.addEventListener</strong> would not work. Also, <strong>elem.bind</strong> seems to work however this isn't the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind" rel="noreferrer">global bind</a>, right?</p>
  
  <p>Also, would be great if someone could touch upon Document Object Model (DOM) Level 2 HTML Specification vs Document Object Model (DOM) Level 1 Specification. Happened to come across this for the first time, is this a new Object hierarchy for DOM elements?</p>
  
  <p>Below is the link function of my directive:-</p>
  
  <pre><code>link: function(scope, elem, attrs) {
    // elem will be HTMLHeadingElement object!
    scope.name = 'New Micheal!';
    elem.addEventListener('click', function(e) {
        elem.css('background-color', 'red');
      })
      /*elem.bind('mouseover', function(e) {
        elem.css('background-color', 'red');
      });
      elem.bind('mouseout', function(e) {
        elem.css('background-color', 'white');
      });*/
  }
  </code></pre>