Chain of Responsibility Pattern

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...