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

'Uncaught TypeError: elements[i].addEventListener is not a function'

Here is the 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 < 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 < 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 < elements.length; i++) {

        if (y > elements[i].top && y < elements[i].top + elements[i].height && 

            x > elements[i].left && x < elements[i].left + elements[i].width) {

            hitElement = elements[i];

        }

    }

    return hitElement;

}

Why is it that I cannot hook up an event handler to each individual element?