JavaScript对象:'addEventListener不是函数'

Question

我创建了一个名为elements的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;
}

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

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