JavaScript 对象 : 'addEventListener is not a function'

Question

我创建了一个名为元素的 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 上绘制的东西进行 HitTest ，那么你必须在 Canvas 对象本身上放置一个 eventListener 以获取输入事件，跟踪你自己在 Canvas 上绘制的对象然后当事件在您的 Canvas 监听器上触发时，您可以针对您放置的内容的数据进行自己的 HitTest 。