There are many scenarios under which we might want to apply certain actions that can fall back from a detailed scope to a more general one.
A nice example would be the help information of a GUI application: when a user requests help information for a certain part of the user interface, it is expected to show information as specific as possible. This can be done with different implementations, and the most intuitive one for a web developer could be events bubbling.
Consider a DOM structure like this:
<div class="outer"> <div class="inner"> <span class="origin"></span> </div> </div>
If a user clicks on the span.origin
element, a click
event would start bubbling from the span
element to the document root (if useCapture
is false
):
$('.origin').click(event => { console.log('Click on `span.origin`.'); }); $('.outer').click(event => { console.log('Click...