How to make a Javascript event handler to execute first?

Question

I have a page which uses jQuery & parsley plugin for form validation and submission. Below is the event handler for the form,

$('#formid').parsley().on('form:submit', function(event) {
    //handle form submit
});

I have another pure JavaScript listener function to be executed on submit of the form. Below is the code snippet,

document.getElementById("formid").addEventListener("submit",function(e){
   //Some code to be executed after form submit
});

I have a requirement not to use jQuery for the above function.

Now the problem is, parsley is stopping flow of events down the line by using event.stopImmediatePropagation();

Because of this, the second event handler is not getting executed. Is there a way I could make my pure javascript handler to execute first? I came across this jQuery solution to bindUp an event handler. But I need pure javascript solution. Any help is greatly appreciated.

Update: Here is JSFiddle for my problem.

Answer 1

The only way is to ensure that the addEventListener handler is added before the jQuery handler. jQuery will use addEventListener to add its handler for the event (at which point it will use that single handler for all handlers for that event on that element), and since handlers added with addEventListener are processed in the order they were added, your non-jQuery handler will be executed first by the browser.

Example:

 // The first addEventListener handler -- does get called document.getElementById("the-button").addEventListener("click", function () { console.log("first addEventListener handler called"); }, false); // The jQuery handler that stops immediate propagation $("#the-button").on("click", function (e) { console.log("jQuery handler called"); e.stopImmediatePropagation(); }); // The second addEventListener handler -- doesn't get called document.getElementById("the-button").addEventListener("click", function () { console.log("this message won't be output"); }, false);

 <input type="button" id="the-button" value="Click Me"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

yes, you can do that. use Boolean true as third parameter to function addEventListener like below. it's binding the handler in capturing phase of the event. for more about capturing and bubbling phase of event see

document.getElementById("formid").addEventListener("submit",function(e){
   //Some code to be executed after form submit
}, true);

Answer 3

hope this will help

First way

I don't know if this is going to work, try to refresh your propagation event :

var refEvent = event.originalEvent;
refEvent.cancelBubble = false;
refEvent.defaultPrevented = false;
refEvent.returnValue = true;
refEvent.timeStamp = (new Date()).getTime();

if (event.target.dispatchEvent){
    event.target.dispatchEvent(refEvent);
} else if (event.target.fireEvent) {
    event.target.fireEvent(refEvent);
}

then you can stop the propagation again after your handler executed by adding event.stopPropagation(); again to your handler this time

Second way

//Listener

var stoped = false;
if(stoped){
    event.stopPropagation();
}

//handler

var stoped = true

source : How to undo event.stopPropagation in jQuery?