Oggetti JavaScript: "addEventListener non è una funzione"

Question

Creo una serie di oggetti JavaScript denominati elementi e la analizziamo in modo da disegnare tutti su una tela e collegarli ad alcuni gestori di eventi. Tuttavia, ottengo un errore che indica che

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

Ecco il codice:

$(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; 
} 

Perché è che non riesco a collegare un gestore di eventi per ogni singolo elemento?

Answer 1

Il tuo errore specifico:

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

è perché elements[i].addEventListener è undefined e non è una funzione così. Il motivo è undefined perché l'array elements contiene oggetti Javascript regolari. Questi oggetti non hanno un metodo .addEventListener(). Questo è un metodo sugli oggetti DOM che sono oggetti Javascript non regolari EventTarget (a meno che non si crei il proprio metodo chiamato addEventListener e lo si aggiunga ai propri oggetti Javascript).

Poiché non vedo un array corrispondente di elementi DOM nel codice, sembra che tu stia cercando di allegare eventListeners ai rettangoli che disegni sulla tua tela, che non è qualcosa che puoi fare in quel modo. Le cose che hai disegnato su un oggetto Canvas sono fondamentalmente come una bitmap. Non conserva la conoscenza degli oggetti che hai disegnato su di essa diversi dai pixel risultanti. Si disegna su di esso e il risultato sono i pixel sulla tela, non un insieme persistente di oggetti come oggetti DOM. Se in un secondo momento si desidera eseguire il test rispetto alle cose disegnate sulla tela, è necessario inserire un eventListener sull'oggetto canvas stesso per ottenere l'evento di input, tenere traccia di quale oggetto è stato disegnato sulla tela e quindi quando l'evento si innesca sul tuo listener di canvas, puoi eseguire il tuo test di successo contro i dati di ciò che hai messo dove.

Answer 2

Stai creando una serie di oggetti javascript di base. Che non hanno il metodo addEventListener che vengono utilizzati solo negli oggetti EventTarget.

Guardate questa simile question per un'idea su come fare ciò che si vuole fare

Answer 3

Si sta tentando di collegare EventListener() agli oggetti che non supportano gli eventi.

Da the docs:

The event target may be an Element in a document, the Document itself, a Window , or any other object that supports events (such as XMLHttpRequest).

Quello che tu chiami elements non corrisponde a nessuno dei criteri di cui sopra.