Transferrable Events

[shama]

Currently it fires events based on if the element registered matches. Element references can get lost, fairly easily in complex DOM changes.

So instead, what if we generate a unique id, set with el.dataset['onloadid'] = uniqid then match elements based on that id. This way, it doesn't matter what happens to the element reference, if it has a matching event id the event is triggered.

/cc @yoshuawuyts @freeman-lab

[yoshuawuyts]

This sounds perfect ❤️

[timwis]

Sounds great to me, though I'll admit it's a bit over my head. Reading it, though, reminded me of two things: (1) this comment in morphdom, and (2) fairly certain throw-down uses unique IDs on its elements as well. Perhaps both those points are irrelevant, but thought I'd share them just in case. Thanks for working on this, @shama.

[shama]

@timwis Thanks! The idea is this:

• When you call onload(el) on an element, it generates a pointer to the onload/unload functions then sets it as a data-onloadid attribute on the element.
• That attribute travels around with the element as the DOM is manipulated.
• Any time an element is added/removed, the MutationObserver checks for a data-onloadid attribute.
• If it has one, we find the matching pointer and call the appropriate onload or unload.

I have the basic idea implemented here: https://github.com/shama/on-load/blob/transferrable-events/index.js and it seems to work great so far. I have some more optimization ideas to try though.

[shama]

Published as 2.1.0. Give it a go!

It simplified shama/modal-element@8f54783 quite a bit. :D

[freeman-lab]

this is awesome @shama !

[yoshuawuyts]

w00t! 🎉

[timwis]

Woah, you're done already?! Nice! Thanks for breaking it down. Just threw it into my choo app in 30 seconds and it seems to be working great.