So I am fucking around with playmycode.com and my own javascript canvas crap and I am trying to create objects which fire off functions when they are clicked. Right now I am checking the position and bounds of every single object on screen whenever the user clicks the mouse in order to see what they are most likely clicking. It doesn't always work (I have to implement a z-buffer sorting thingy to fix it up a bit) and I know it will get a lot more inefficient as I add more objects to be clicked.
It would be silly to ask for a specific solution, rather I want to know the theory behind creating event-based objects. I really don't like polling every single object on screen each time the user clicks the mouse. Can I assign a property to each pixel when it is drawing a specific object (like a big array, one entry for each pixel) and have the mouse click location just check that array? Should I divide the screen up into smaller areas so I don't have to check as much at once? How is this usually handled?