Add an event listener to a drawn object on html5 canvas

I'm making a game where the bubbles (circles) appear on the screen and move upwards and I'm using HTML5 and JavaScript only which means no frameworks like kinetic and no jQuery at all.

I've come to a point where I want to add an event listener to the bubble itself, now I understand that because the bubble is an object on the canvas, it has no method 'addEventListener' so I can't directly add a click event to the bubble, I was wondering if anybody could help me with this problem I'm having? Here is a fiddle of what happens so far...

Bubbles

I have tried to add the event listener to the bubble as specified before by doing this...

bubbles[i].addEventListener('click', function);

I have also tried adding mouseevents such as

bubbles[i].onmouseenter = function () { console.log("blah") }

But now, I'm seriously at a loss

Thanks in advance!