Вопрос:
Я создаю массив объектов JavaScript, называемых элементами, и прохожу через него, чтобы рисовать каждый на холсте, а также подключать к нему несколько обработчиков событий. Тем не менее, я получаю сообщение об ошибке
‘Uncaught TypeError: elements[i].addEventListener is not a function’
Вот код:
$(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; }
Почему я не могу подключить обработчик событий к каждому отдельному элементу?
Лучший ответ:
Ваша конкретная ошибка:
‘Uncaught TypeError: elements[i].addEventListener is not a function’
состоит в том, что elements[i].addEventListener есть undefined и, следовательно, не является функцией. Причина, по которой это undefined, состоит в том, что ваш массив elements содержит обычные объекты Javascript. Эти объекты не имеют метода .addEventListener(). Это метод для объектов DOM, которые EventTarget, а не обычные объекты Javascript (если вы не создали свой собственный метод addEventListener и добавили это к вашим объектам Javascript).
Так как я не вижу соответствующий массив элементов DOM в вашем коде, он выглядит так, как будто вы пытаетесь присоединить eventListeners к прямоугольникам, которые вы рисуете на своем Canvas, что вы не можете сделать таким образом. То, что вы нарисовали на объекте Canvas, в основном похоже на растровое изображение. Он не сохраняет знания объектов, которые вы нарисовали на нем, кроме результирующих пикселей. Вы рисуете на нем, и результат – это пиксели на холсте, а не постоянный набор объектов, таких как объекты DOM. Если вы хотите, чтобы позже ударили тестирование по сравнению с вещами, которые вы нарисовали на холсте, вам нужно будет поместить eventListener на сам объект canvas, чтобы получить входное событие, следить за тем, какой объект вы нарисовали на холсте, а затем когда событие запускается на вашем слушателе холста, вы можете выполнить свое собственное тестирование на удары по сравнению с данными о том, что вы положили туда.
Ответ №1
Вы создаете массив основных объектов javascript. Которые не имеют метода addEventListener, который используется только в EventTarget.
Посмотрите на эту похожую question за идею о том, как делать то, что вы хотите сделать
Ответ №2
Вы пытаетесь присоединить EventListener() к объектам, которые не поддерживают события.
Из документы:
Целевой объект может быть Element в документе, Documentself, a Window или любой другой объект, который поддерживает события (например, XMLHttpRequest).
То, что вы называете elements, не соответствует ни одному из вышеуказанных критериев.
