I have an interesting question about event capturing, bubbling and jQuery.on()
.
I have recently learned more about the difference between event capturing and event bubbling and how the two flow differently in and out of the child-parent elements within the DOM.
So to add an event listener with "event capture direction" i would use:
element.addEventListener("click", myFunction, true);
and to add an event listener with "event bubble direction" i would use:
element.addEventListener("click", myFunction, false);
This is all good and well, but what I want to know is when using jquery.on()
to add event listeners, how does one specifiy the event direction in terms of capturing and bubbling?
currently I am using something like:
$('parent selector').on('click', 'child selector', function(){alert('just alert something already...');});
How do I tell jQuery that it needs to add these event listeners in the "event capture direction" or the "event bubble direction"?
With bubbling, the event is first captured and handled by the innermost element and then propagated to outer elements. With capturing, the event is first captured by the outermost element and propagated to the inner elements.
The concept of "bubbling up" is like if you have a child element with a click event and you don't want it to trigger the click event of the parent. You could use event. stopPropagation() . event.
Capturing phase : the event moves down towards the element. Target phase: the event reaches the target element. Bubbling phase: the event bubbles up from the element.
Event bubbling is a method of event propagation in the HTML DOM API when an event is in an element inside another element, and both elements have registered a handle to that event. It is a process that starts with the element that triggered the event and then bubbles up to the containing elements in the hierarchy.
You can't. jQuery events works with event bubbling it doesn't support capturing.
Also see
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