JavaScript Objects: 'addEventListener is not a function'

Question

I create an array of JavaScript objects called elements and go through it to draw each one on the canvas and also connect several event handlers to it. However, I get an error

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

Here is the code:

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

Why can't I attach an event handler to every single element?

Answer 1

Your specific error:

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

consists in the fact that elements[i].addEventListener is undefined and therefore is not a function. The reason this is undefined is because your elements array contains regular Javascript objects. These objects do not have a .addEventListener() method. This is a method for DOM objects that have an EventTarget , not regular Javascript objects (unless you created your own addEventListener method and added this to your Javascript objects).

Since I don’t see the corresponding array of DOM elements in your code, it looks like you are trying to attach eventListeners to the rectangles that you draw on your Canvas, which you cannot do in this way. What you painted on the Canvas object is basically like a bitmap. It does not preserve the knowledge of the objects that you painted on it, except for the resulting pixels. You draw on it, and the result is pixels on the canvas, and not a constant collection of objects, such as DOM objects. If you want testing to hit later than the things you painted on the canvas, you will need to place the eventListener on the canvas object itself to get the input event, keep track of which object you painted on the canvas, and then when the event fires on your canvas listener, you can do your own impact testing compared to what you put there.

Answer 2

You create an array of javascript core objects. Which do not have the addEventListener method, which is used only in EventTarget .

Look at this similar question for an idea on how to do what you want to do.

Answer 3

You are trying to attach EventListener() to objects that do not support events.

From the docs :

The target can be an Element in a document, Document self, a Window or any other object that supports events (such as XMLHttpRequest ).

What you call elements does not meet any of the above criteria.