Define the order of execution of functions after event in javascript

Question

Just, before reading, I have read about this thread: Order of execution of functions bound to an event in Javascript but its not helping. Actually, I have an anonymous function, define like that:

<input type="button" name="blablabla" value="Send" onclick="javascript:blablabla">

So, this function is on a button, use to validate forms. As you can see, It's an anonymous function, and I don't have any access on this code. This function start when I click on it. Okay, I have understood that

But, this function is not totally full, and I want to add my own, with her own logic of check. So I want my checks first, and then call the anonymous function. Here is my code:

function check() {
  console.log("debut de check");
  var participant = document.getElementById("new_participant_name");
  var participant1 = document.getElementById("new_participant2_name");
  var participant2 = document.getElementById("new_participant3_name");
  participant = participant.value;
  participant1 = participant1.value;
  participant2 = participant2.value;

  var trois_participants = (participant2) ? true : false;
  if (!participant1 || !participant)
  {
    console.log("pas de participant1 ou participant, sert à rien de gérer la suite");
    //if the script come here, I want to stop processing, and don't want to call the anonymous function.
    return ;
  }
}
window.onload = function()
{
  document.getElementById("InsertButton").addEventListener('click', function () {
check();
})};

So, I want to call my function (check) before the anonymous function, but, with the same event. I don't know if I am totally understable... thanks per avance

EDIT: Sorry guys, My code have a bug before, yes the code is inlined, I will try all of your solutions tomorrow, thanks guys

how is this (other) anonymous function bound to the event ? – Alnitak Dec 20 '16 at 16:30 — Alnitak, Dec 20 '16 at 16:30
by onclick="" in the html code – Oscar Dec 21 '16 at 08:40 — Oscar, Dec 21 '16 at 08:40

score 3 · Answer 1 · answered Dec 20 '16 at 16:33

If (and only if) the existing handler is attached using an inline onclick="..." handler, you can obtain its value, and then overwrite it:

window.onload = function() {
    var el = document.getElementById('InsertButton');
    var old_click = el.onclick;
    el.onclick = undefined;
    el.addEventListener('click', function() {
        check();
        old_click(this);
    });
}

score 2 · Answer 2 · answered Dec 20 '16 at 16:40

Why not create your own handler??

Element.prototype.myEventListener=function(name,func){
 this.addEventListener(name,function(){
   if(!check()){return;}
   func();
 });
 };

Now you can do:

document.body.myEventListener("click",function(){
alert("t");
});

Check will always be called before the registered handler. Note, to block the call, check must return false:

function check(){
 return false;//no custom eventlistener fires
 return true;//all will fire
 }

alebianco · Answer 3 · 2016-12-20T17:13:32.330

Use the useCapture flag so you can intercept the event while it's travelling down to the button.
At that point you can perform your check, and if it fails you can call stopPropagation on the event to prevent it from reaching the handlers that are attached to its bubbling phase.

Also, by nature, events are quite bad at managing the order of execution. In general they depend on the order of registration of the listeners.

// code over which you have no control and can't change
var btn = document.getElementById("greeter");
btn.addEventListener("click", function() {
  console.log("hello");
})


// code you can add later
function check() {
  return Math.random() > 0.5;
}

window.addEventListener("click", function(e) {
  var greeter = document.getElementById("greeter");
  if (e.target === greeter && !check()) {
    e.stopPropagation();
  }
}, true)

<button id="greeter">hello world</button>

Define the order of execution of functions after event in javascript

3 Answers3