I am working on developing an HTML canvas application, where I need to be able to do my own UI event processing. That's where the stem of this question comes from, but I'd really like to understand how the whole process works.
Note: I am familiar with the Observer pattern, that's not what I'm asking for on 2 and 5.
So, I'm looking for the correct way to:
- Send the event down to the correct child
- Call subscribers to the event, if they exists
- Stop processing when it's appropriate
- Bubbling back up to the caller
- Calling the subscribers to the bubble event, if they exist.
For #1, what I've come up with seems a bit rudimentary. Is there a better way?
for child in children if child.containsPoint(x, y) // Do stuff
For #2, I understand how observers and subscribers work, but how do I differentiate between tunneling down, and calling a handler if one has been subscribed. Because, I may have a parent element which does not do anything with say, the mouse move event, but it still needs to send it to the child below it, if there is one.
For #3, I've seen this often where the event data has a
Handled property. However, how do I get if it's been handled. If there are many subscribers to an event, do they get called one by one, and each time the
Handled property is checked, and if it comes back true, then stop looping? Also, should I bubble back up if a tunnel event handles something?
For #4, typically there is a property or parameter which specifies the originating object. So, if I tunnel from A -> B -> C, then C is what is held in that property. So then, when I'm at B, getting C's bubble, how do I know to call back up to A?
For #5, this is pretty much the same as #2, it's just here in case it's different.
I'm really hoping there are some patterns which define how to do all of this well, but apparently my Googling skills were not up to par to be able to find them if there are.