What is the native implementation for event delegation on dynamically created dom elements?
I tried looking at the jQuery source but I can't follow the .on
method.
Note: Currently I attach the event handlers after the dom elements are created, which seems pretty standard but I like the way jQuery .on
handles dynamically created elements events with this syntax $( document ).on( "click", ".selector", handler );
.
What happens is basically this:
// $(document).on("click", <selector>, handler)
document.addEventListener("click", function(e) {
for (var target=e.target; target && target!=this; target=target.parentNode) {
// loop parent nodes from the target to the delegation node
if (target.matches(<selector>)) {
handler.call(target, e);
break;
}
}
}, false);
However, e.currentTarget
is document
when the handler
is called, and e.stop[Immediate]Propagation()
will work differently. jQuery abstracts over that (including call order) a lot.
I've used the .matches()
method, which is not yet standard but already available under different names in modern browsers. You might use a custom predicate to test elements instead of a selector. And addEventListener
is obviously not oldIE-compatible.
This should do it for you on a regular HTML element:
HTMLElement.prototype.on = function(event, selector, handler) {
this.addEventListener(event, function(e) {
let target = e.target;
if (typeof(selector) === 'string') {
while (!target.matches(selector) && target !== this) {
target = target.parentElement;
}
if (target.matches(selector))
handler.call(target, e);
} else {
selector.call(this, e);
}
});
};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With