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?

"anyFunction n'est pas une fonction" signifie que anyFunction ne fait pas partie de l'objet d'où son nom.

OriginalL'auteur kformeck | 2015-06-19