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.

I've managed to find out that typically events will capture or tunnel town, and then bubble back up, but that's as far as I've managed to get.

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:

  1. Send the event down to the correct child
  2. Call subscribers to the event, if they exists
  3. Stop processing when it's appropriate
  4. Bubbling back up to the caller
  5. 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.

  • 4
    Obviously "tunnelling" and "bubbling" means something to you, but I think that most of us here don't understand what you mean. (And apparently, neither does Google ...) You would do better using accepted technical terminology instead of metaphors to describe your problem. – Stephen C Oct 9 '16 at 6:56
  • 4th and 5th will end up into a Condition Race if you don't know how to deal with pub/sub pattern design. In my company we call this "goto effect". Avoid subscribers publishing events as responses to the trigger. Use callbacks. – Laiv Oct 9 '16 at 10:21
  • @stephenc, I provided two links that explain what I found on tunneling and bubbling. If I knew better terms, then I probably wouldn't have asked the question. – David Oct 9 '16 at 13:29
  • @laiv, the whole point of the question is to understand how the system works, so I can understand how to avoid things like that. But just telling me that there will be a race condition doesn't help very much. – David Oct 9 '16 at 13:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.