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, if you know the answer plz helping me thanks — cyx
– cyx, Commented Nov 26, 2016 at 18:24
I think U need change event model. Event capturing <-> Event bubbling. check this web: quirksmode.org/js/events_order.html — Adam G.
– Adam G., Commented Jun 1, 2022 at 9:48

RizkiDPrast · Accepted Answer · 2016-11-26 17:08:32Z

2

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>

answered Nov 26, 2016 at 17:08

RizkiDPrast

1,7251 gold badge15 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

cyx Over a year ago

thanks, i think your answer is close, but i think i too simplify my question, so I ask another question here, if you know the answer plz helping me thanks

rosell.dk Over a year ago

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 stackoverflow.com/questions/2706109/…

germanescobar · Accepted Answer · 2016-11-26 16:28:47Z

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, 2016 at 16:28

germanescobar

8126 silver badges9 bronze badges

1 Comment

cyx Over a year ago

i think i too simplify my question, so I ask another question here, if you know the answer plz helping me thanks

Collectives™ on Stack Overflow

How to change event execution order?

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related