How to change event execution order?

Question

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>Close window</title>
</head>
<body>
 <button id="abc" onclick="temp1()">button</button>

<script type="text/javascript">
 function temp1() {
  alert("temp1");
 };

 function temp2() {
  alert("temp2");
 }

 document.getElementById("abc").addEventListener("click", temp2, false);
</script>
</body>
</html>

but I want to show "temp2" first, and then show "temp1"

Is that possible? or the event execution order depends on the browser so I can't change it?

thanks for help!!

@Marielitos i think i too simplify my question, so I ask another question [here](http://stackoverflow.com/questions/40821567/how-to-set-the-event-to-be-triggered-first), if you know the answer plz helping me thanks — cyx, Nov 26 '16 at 18:24
I think U need change event model. Event capturing <-> Event bubbling. check this web: https://www.quirksmode.org/js/events_order.html — Adam G., Jun 01 '22 at 09:48

score 2 · Accepted Answer · answered Nov 26 '16 at 17:08

Please review this one:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Close window</title>
</head>

<body>
  <!-- here is your first AddEventlistener-->
  <button id="abc" onclick="temp1()">button</button>

  <script type="text/javascript">
    function temp1() {
      alert("temp1");
    };

    function temp2() {
      alert("temp2");
    }

    /*then here is your second AddEventlistener*/
    var d = document.getElementById("abc");
    d.addEventListener("click", temp2, false);

    /*javascript will execute it in order
      if you want to change the order. remove first EventListener then register new one after. something like this:
    */
     //remove listener
    d.onclick = null;
     //register new
    d.addEventListener('click', temp1);
  </script>
</body>

</html>

thanks, i think your answer is close, but i think i too simplify my question, so I ask another question [here](http://stackoverflow.com/questions/40821567/how-to-set-the-event-to-be-triggered-first), if you know the answer plz helping me thanks — cyx, Nov 26 '16 at 18:21
You cannot count on the order for older browsers. DOM level 2 specified that there were no specification of order. However, with DOM level 3, you CAN count on the order. See https://stackoverflow.com/questions/2706109/are-event-handlers-in-javascript-called-in-order — rosell.dk, Jan 31 '18 at 11:46

score 1 · Answer 2 · answered Nov 26 '16 at 16:28

1

There are a couple of ways in which you can guarantee the order here:

document.getElementById("abc").addEvenListener("click", function() {
  temp2();
  temp1();
}, false);

Another option would be:

function temp2() {
  alert();
  temp1(); // call temp1 at the end of temp2
}

document.getElementById("abc").addEventListener("click", temp2, false);

answered Nov 26 '16 at 16:28

germanescobar

782
5
9

i think i too simplify my question, so I ask another question [here](http://stackoverflow.com/questions/40821567/how-to-set-the-event-to-be-triggered-first), if you know the answer plz helping me thanks – cyx Nov 26 '16 at 18:25

How to change event execution order?

2 Answers2