Description: Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
https://api.jquery.com/event.stoppropagation/
I found this one in here → https://api.jquery.com/event.stoppropagation/
But I could not make the head and tail of the above statement. Can someone please help me to understand the novice like me so that I can grasp this concept.
<div>
<p>...</p>
</div>
Events are handled first by bubbling up, then by trickling down (called the capture phase). Normally these days we just use bubbling and ignore capture.
With the above example HTML code, an event listener on the div will pick up events both for itself and for anything inside of the div.
If both the div and the p have an event handler, clicking on the p triggers the p click handler, then the event moves up the tree to the paragraphs parent and triggers the div click handler.
When an event Stops propagation, that prevents the event from triggering any other potential events.
I am facing difficulty grasping this. I search an article, but could not fully get enlightened with the idea →
In the image from my previous post the green line shows bubbling up where the event goes up through each parent node, right to the top.
It can be quite tricky to get your head around all the details of events. This article helps to go through most of the details of bubbling and capturing. https://quirksmode.org/js/events_order.html
As far as visualizing it, look at Paul’s code above, or consider the code below:
<div id="a">
<div id="b">
<a id="c">ImaLink</a>
</div>
<div id ="d">
<a id="e">AlsoALink</a>
</div>
</div>
You click on the link marked “AlsoALink”. So you’ve clicked on that.
But that link is also inside a div, “d”, so the div spans the area of the page that you clicked on. So in truth, you also clicked on that div, and we need to check and see if there’s any click handlers on that div.
Div d is also spanned by div “a”. So you clicked on div “a” as well. Check that one too.
Div b is also inside div A, but it does not span the area that was clicked, so we dont check that.
This article was very insightful. Thanks for sharing.
$.fn is something predefined in JS/ JQuery or this is just a nomenclature of choice?
It’s defined in jquery.
$.fn. is a shorthand for jQuery.prototype.
I read from this resource so prototype is just like declaring global properties that can be used and shared by everyone else.
Can you suggest me the best resources from where I can study about JQuery methods?
Would it be unsuitable at all to mention a jQuery book that Sitepoint provides?
And how about this one →
https://github.com/getify/You-Dont-Know-JS/blob/master/up%20&%20going/README.md#you-dont-know-js-up--going
Well that one doesn’t seem to cover jQuery, which is what you asked about.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.