Have inputs with very complex behavior where for example the change-event regulating any input value formatting like .trim() and the keydown-event where the next focus with .focus() went so if the content changed but also the input is left with enter I get problems cause the behavior of the next focus is based on the correct input formatting before but I cannot control the order or appearance of events.

With this logical and practical overlapping I try multiple solutions and end up blocking any typing by trying block keydown with event.preventDefault to trigger also change or a double code excecution of side effects caused by special input values so how can I control events here when it seems no event does know about the other?!

In general: What should be a code design to handle problems with any overlapping events?

document.getElementById("main").addEventListener("change", function(event){
  console.log("change");
});
document.getElementById("main").addEventListener("keydown", function(event){
  if(event.key == "Enter"){
    console.log("keydown");
  }
});

<ol>
  <li>change and click out => change</li>
  <li>press enter => keydown</li>
  <li>change and press enter => kewdown and change instead change and keydown</li>
</ol>
<input id="main" value="x"/>