Les objets JavaScript: 'addEventListener n'est pas une fonction"

J'ai créer un tableau d'objets JavaScript appelée éléments et boucle à travers elle dans le but de tirer chacun sur une toile ainsi que de brancher un peu de gestionnaires d'événements. Cependant, je reçois un message d'erreur indiquant que

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

Voici le 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;
}

Pourquoi est-il que je ne peut pas brancher un gestionnaire d'événement pour chaque élément?

OriginalL'auteur kformeck | 2015-06-19