title: JavaScript objects: 'addEventListener is not a function'
body: <p>I create an array of JavaScript objects called elements and loop through it in order to draw every one on a canvas as well as hooking up a few event handlers to it.  However, I get an error stating that </p>
  
  <pre><code>'Uncaught TypeError: elements[i].addEventListener is not a function'
  </code></pre>
  
  <p>Here is the code:</p>
  
  <pre><code>$(document).ready(onDocumentReady);
  function onDocumentReady() {
      var COLOR_NORMAL = '#005A84';
      var COLOR_SELECTED = '#00F2F2';
      var COLOR_MOUSEOVER = '#5BA621';
  
      var canvas = document.getElementById("mapCanvas");
      var context = canvas.getContext('2d');
      var data = @Html.Raw(Json.Encode(Model.DiePrintList));
      var elem =
          canvas,
          left = elem.offsetLeft,
          top = elem.offsetTop,
          context = elem.getContext('2d'),
          elements = [];
      for (var i = 0; i &lt; data.length; i++) {
          elements.push({
              color: '#0489B1',
              width: 15,
              height: 15,
              row: data[i].Row,
              col: data[i].Col,
              top: data[i].Row * 20,
              left: data[i].Col * 20
          });
      }
      for (var i = 0; i &lt; elements.length; i++) {
          elements[i].addEventListener('click', function(event) {
              var hitElement = getHitElement(elements, event.pageX - left, event.pageY - top);
              hitElement.color = COLOR_SELECTED;
              drawElement(context, hitElement);
          }, false);
          elements[i].addEventListener('mouseover', function(event) {
              var hitElement = getHitElement(elements, event.pageX - left, event.pageY - top);
              hitElement.color = COLOR_MOUSEOVER;
              drawElement(context, hitElement);
          }, false);
          elements[i].addEventListener('mouseout', function(event) {
              var hitElement = getHitElement(elements, event.pageX - left, event.pageY - top);
              hitElement.color = COLOR_SELECTED;
              drawElement(context, hitElement);
          }, false);
          drawElement(context, elements[i]);
      }
  }
  function drawElement(context, element) {
      context.fillStyle = element.color;
      context.fillRect(element.left, element.top, element.width, element.height);
  }
  function getHitElement(elements, x, y) {
      var hitElement;
      for (var i = 0; i &lt; elements.length; i++) {
          if (y &gt; elements[i].top &amp;&amp; y &lt; elements[i].top + elements[i].height &amp;&amp; 
              x &gt; elements[i].left &amp;&amp; x &lt; elements[i].left + elements[i].width) {
              hitElement = elements[i];
          }
      }
      return hitElement;
  }
  </code></pre>
  
  <p>Why is it that I cannot hook up an event handler to each individual element?</p>