Event Capturing and Event Bubbling in jQuery
Introduction
Before diving to define both terms, let's look at the
image given below.
In above image, there is a <div> that has
<span> and <p>. For any event, there are multiple elements that
could logically be responsible for reacting. When the link on this page is
clicked, <div>, <span> and <a> all should get the opportunity
to respond. On the other hand <p> element is not part of this interaction
at all.
Event
Capturing
It is a strategy that allow multiple elements to
respond to the user interaction (like click, mouse move etc). In Event
Capturing, even is first given to the most all-encompassing element and then to
successively more specific ones. In the above example, first the <div>
gets passed the event, then the <span> and at the end <a>.
Event
Bubbling
It is just opposite strategy where the event gets sent
to the most specific element and after this element has an opportunity to
react, the event bubbles up to more general elements. In the above example,
<a> would be handled the event first and then <span> and
<div>.
Comments
Post a Comment