html - JavaScript objects: 'addEventListener is not a function' -

i create array of javascript objects called elements , loop through in order draw every 1 on canvas hooking few event handlers it. however, error stating

'uncaught typeerror: elements[i].addeventlistener not function' 

here 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 = [];     (var = 0; < 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         });     }     (var = 0; < 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;     (var = 0; < 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 cannot hook event handler each individual element?

your specific error:

'uncaught typeerror: elements[i].addeventlistener not function' 

is because elements[i].addeventlistener undefined , not function. reason undefined because elements array contains regular javascript objects. objects not have .addeventlistener() method. method on dom objects eventtarget, not regular javascript objects (unless make own method called addeventlistener , add javascript objects).

since don't see corresponding array of dom elements in code, appears you're trying attach eventlisteners rectangles draw on canvas not can in way. t'he things you've drawn on canvas object bitmap. doesn't retain knowledge of objects drew on other resulting pixels. draw on , result pixels on canvas, not persistent set of objects such dom objects. if want later hit testing versus things drew on canvas, you'd have put eventlistener on canvas object input event, keep track of object drew on canvas , when event triggers on canvas listener, can own hit testing versus data of put where.