title: Handling priority with events from extenal libraries in Javascript
body: <p>I'm using <a href="http://vodkabears.github.io/remodal/" rel="nofollow noreferrer">Remodal</a> Javascript lib to handle with modal windows.
  The point is that the library has handlers for custom events, e.g. the following javascript</p>
  
  <pre><code>$(document).on('opening', '.remodal', function (e) {
     console.log('opening');
  });
  </code></pre>
  
  <p>will be triggered when a modal window is open by clicking on another DOM element. </p>
  
  <pre><code>&lt;a data-remodal-target="modal-window-id" id="trigger"&gt;CLICK ME TO OPEN MODAL&lt;/a&gt;
  
  &lt;div class="remodal data-remodal-id="modal-window-id&gt;MODAL CONTENT&lt;/div&gt;
  </code></pre>
  
  <p>Now, If I add in a javascript file also the following call to a click event</p>
  
  <pre><code>$(document).on('click', '#trigger', function (e) {
     console.log('trigger clicked');
  });
  </code></pre>
  
  <p>regardless of the position of the previous script (i.e. before or after the other), I see that the <code>opening</code> event is fired before. I know, in Javascript there is not really a guarantee of event execution, apart from some exeptions or when using jQuery (e.g. attaching the listeners in the proper sequence).</p>
  
  <p>Now, how can I manage to execute <code>click</code> before <code>opening</code>? It occurs before, but somehow there should be another <code>click</code> listener attached to that anchor that is executed before.</p>
  
  <p>Any idea?</p>