JavaScript 个对象：'addEventListener is not a function'

Question

我创建了一个名为 elements 的 JavaScript 对象数组并循环遍历它，以便在 canvas 上绘制每个对象并为其连接一些事件处理程序。但是，我收到一条错误消息，指出

'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;
}

为什么我无法将事件处理程序连接到每个单独的元素？

Answer 1

您的具体错误：

'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 对象上绘制的东西基本上就像位图。除了生成的像素之外，它不会保留您在其上绘制的对象的知识。您在其上绘制，结果是 canvas 上的像素，而不是一组持久的对象，例如 DOM 对象。如果你想稍后对你在 canvas 上绘制的东西进行命中测试，那么你必须在 canvas 对象本身上放置一个 eventListener 以获取输入事件，跟踪自己的对象你在 canvas 上绘制了 where 然后当事件在你的 canvas 侦听器上触发时，你可以对你放置的数据进行自己的命中测试。

Answer 2

您正在制作一组基本 javascript 对象。没有仅在 EventTarget 个对象中使用的 addEventListener 方法。

看看这个类似的question，了解如何做你想做的事情

Answer 3

您正在尝试将 EventListener() 附加到不支持事件的对象。

来自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).

您所说的 elements 不符合上述任何条件。

JavaScript 个对象：'addEventListener is not a function'

JavaScript objects: 'addEventListener is not a function'

html

javascript

mapping

canvas

object