Native JS equivalent to jQuery delegation

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. … Read more

Event delegation vs direct binding when adding complex elements to a page

You will create less CPU overhead in binding the events using $(<root-element>).on(<event>, <selector>) since you will be binding to a single “root” element instead of potentially many more single descendant elements (each bind takes time…). That being said, you will incur more CPU overhead when the actual events occur as they have to bubble up … Read more