Define function to be invoked first on onclick event using addEventListener or other method

Question

I have legacy JS code which I don't what to touch defined in script A.js. It have simple onclick event and function attached to it:

$(document).ready(function () {
    //jquery onclick 
    $("#create_button").click(function (e) {
    ..... 
    }
}    
    //html
     <button class="btn btn-primary" id="create_button"
                                            name="create_button">
                                        Create New app
                                    </button>

Then to add functionality to this button I'm defining in doing this is loading in my second script script B.js which comes after A.js:

$(window).on('load', function(){
    document.getElementById("create_button").addEventListener("click", () => {
                                      self.MyFirstFunction()
                     }, false);

}

How can I defined that self.MyFirstFunction() will always trigger the first?

Answer 1

set useCapture to true when adding event listener to the element:

For event listeners attached to the event target, the event is in the target phase, rather than the capturing and bubbling phases. Event listeners in the “capturing” phase are called before event listeners in any non-capturing phases.

$('#element').click(function(){
  console.log("first registered Handler in source code")
})

document.getElementById("element").addEventListener("click",function(e){
console.log("second registered Handler in source code")},true); // Notice the last argument is true 

#element{
  width:200px;
  height:100px;
  background:lightgreen;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="element"></div>