The short answer is simply, you can’t. The problem Normally, you can stop an event from “bubbling up” to event handlers on outer elements because the handlers for inner elements are called first. However, jQuery’s “live events” work by attaching a proxy handler for the desired event to the document element, and then calling the … Read more
While I agree that it would be better having only one event listener on the whole form instead of many listeners, one for each element, you have to evaluate the costs and benefits of your decision. The benefit of one listener is a reduced memory footprint. The downside is that you have to do such … Read more
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
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
Update 2016-06-27: instead of using Observables, use either a BehaviorSubject, as recommended by @Abdulrahman in a comment, or a ReplaySubject, as recommended by @Jason Goemaat in a comment A Subject is both an Observable (so we can subscribe() to it) and an Observer (so we can call next() on it to emit a new value). … Read more
DOM event delegation is a mechanism of responding to ui-events via a single common parent rather than each child, through the magic of event “bubbling” (aka event propagation). When an event is triggered on an element, the following occurs: The event is dispatched to its target EventTarget and any event listeners found there are triggered. … Read more