The inner workings of event delegation in Mercury

[alessioalex]

I was curious about how Mercury handles events. Does it delegate them to the parent element, then cleans them up automatically? With Backbone you have to manually clean them up, and React claims to do that automatically, but I was more interested in Mercury (since I think I can understand the code easier and I'm not yet that interested in playing with React).

The following is for people who were asking themselves the same question(s). Perhaps it can be added to the docs somewhere.

Edit: please correct me if I'm wrong guys.

Here it goes:

• dom-delegator assigns global events when you instantiate it:

https://github.com/Raynos/dom-delegator/blob/master/index.js#L13-L19
https://github.com/Raynos/dom-delegator/blob/master/index.js#L50-L54

• virtual-hyperscript (note: it's a component of virtual-dom) stores those events into ev-store:

https://github.com/Matt-Esch/virtual-dom/tree/master/virtual-hyperscript#ev-
https://github.com/Matt-Esch/virtual-dom/blob/master/virtual-hyperscript/index.js#L94-L97
https://github.com/Matt-Esch/virtual-dom/blob/master/virtual-hyperscript/hooks/ev-hook.js#L15-L20

• each time a global event is triggered (such as click) on an element, dom-delegator looks into ev-store for that element to find if there's an event handler stored:

https://github.com/Raynos/dom-delegator/blob/master/dom-delegator.js#L152

it repeats the process for all the elements above (from parentNode to parentNode until it reaches the root):

https://github.com/Raynos/dom-delegator/blob/master/dom-delegator.js#L157-L159
https://github.com/Raynos/dom-delegator/blob/master/dom-delegator.js#L148-L150

the code for the "finding" and executing the handlers is here:

https://github.com/Raynos/dom-delegator/blob/master/dom-delegator.js#L131-L144

[kuraga]

@alessioalex thank you for links! Tried to understand the same, and wend the same way. But don't have a confidence in understanding the whole mechanism.

👍 to adding to the docs.

See also: #122

[alessioalex]

@kuraga thanks! Saw that issue before, but didn't make much of it until reading the code. Totally makes sense now.

[kuraga]

Also it's good to add about triggering events...

And it's hard to understand why we have a whole component (value-event) for this.

[neonstalwart]

@alessioalex the short answer is that you don't need to cleanup events yourself if you're using virtual-hyperscript to add them.

your explanation sounds like you're understanding what's happening.

[neonstalwart]

@kuraga events cannot be triggered apart from the event originating from the DOM itself. so, you can use document.createEvent if you want but i'm not sure i'd advise it.

value-event is more or less a way to treat a DOM event as something low-level and instead produce an event that's not as tightly coupled to the DOM - think of it more like a convenience layer rather than something which is necessary. you can often avoid it if it isn't adding value for you.

[kuraga]

@Raynos @kumavis @nrw @alessioalex
Let's add the first topic's message to the FAQ?