Obiekty JavaScript: 'addEventListener nie jest funkcją'

Question

Tworzę tablicę obiektów JavaScript nazwanych elementami i przechodzę przez nią, aby narysować każdy na płótnie, a także podpiąć do niego kilka programów obsługi zdarzeń. Jednakże pojawia się błąd stwierdzając, że

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

Oto kod:

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

Dlaczego jest to, że nie mogę podłączyć moduł obsługi zdarzeń do każdego elementu?

Answer 1

Twój specyficzny błąd:

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

dlatego elements[i].addEventListener jest undefined, a zatem nie jest funkcją. Powodem jest undefined, ponieważ Twoja tablica elements zawiera zwykłe obiekty Javascript. Te obiekty nie mają metody .addEventListener(). Jest to metoda na obiektach DOM, które są EventTarget, a nie zwykłymi obiektami Javascript (chyba że stworzysz własną metodę o nazwie addEventListener i dodasz ją do swoich obiektów JavaScript).

Ponieważ nie widzę odpowiadającej tablicy elementów DOM w kodzie, wydaje się, że próbujesz dołączyć eventListeners do prostokątów rysowanych na twoim płótnie, co nie jest czymś, co możesz zrobić w ten sposób. Rzeczy, które narysowałeś na obiekcie Canvas, są w zasadzie niczym mapa bitowa. Nie zachowuje wiedzy o obiektach narysowanych na nim poza pikselami wynikowymi. Rysujesz na nim, a wynikiem są piksele na płótnie, a nie stały zestaw obiektów, takich jak obiekty DOM. Jeśli chcesz później przetestować testowanie w porównaniu z rzeczami narysowanymi na płótnie, musisz umieścić obiekt eventListener na samym obiekcie canvas, aby uzyskać dane wejściowe, śledzić, który obiekt narysowałeś na płótnie, a następnie kiedy zdarzenie zostanie uruchomione na kanale nasłuchującym, możesz wykonać własne testy trafień w porównaniu z danymi, które umieściłeś w miejscu.

Answer 2

Tworzysz szereg podstawowych obiektów javascript. Które nie mają metody addEventListener, które są używane tylko w obiektach EventTarget.

Spójrz na to podobnie question pomysłu jak to zrobić, co chcesz zrobić

Answer 3

Próbujesz dołączyć EventListener() do obiektów, które nie obsługują zdarzenia.

Od 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).

Co nazywasz elements nie pasuje do żadnego z powyższych kryteriów.