Tenga entradas con un comportamiento muy complejo donde, por ejemplo, el evento de change regula cualquier formato de valor de entrada como .trim() y el keydown donde el siguiente enfoque con .focus() fue así que si el contenido cambió pero también la entrada se queda con enter Tengo problemas porque el comportamiento del siguiente enfoque se basa en el formato de entrada correcto anterior , pero no puedo controlar el orden o la apariencia de los eventos.

Con esta superposición lógica y práctica, pruebo varias soluciones y termino bloqueando cualquier tipeo al intentar bloquear la pulsación de tecla con keydown para activar también el change o una event.preventDefault de código doble de efectos secundarios causados por valores de entrada especiales, entonces, ¿cómo puedo controlar los eventos aquí cuando ¡¿Parece que ningún evento sabe del otro?!

En general: ¿Cómo debería ser un diseño de código para manejar problemas con eventos superpuestos?

 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"/>