Si tenemos un formulario, podemos enviarlo presionando la tecla Intro en el teclado, de modo que cuando estemos en el formulario y luego presionemos Intro, qué evento se activó primero, evento de envío de formulario o teclado (ya sea presionando, presionando o presionando) ¡¿evento?!
Edición
Aquí está mi código de prueba para el problema anterior: https://codepen.io/ultimateblue-the-selector/pen/gOxrapj?editors=1111
parte HTML:
<body> <div class="input__div"> <form class="input__form" action="" method="post"> <label for="type">Type</label> <select name="workout__type" id="type"> <option selected value="Running">Running</option> <option value="Cycling">Cycling</option> </select> <label for="distance">Distance</label> <input class="usr__input" type="text" name="" id="distance" placeholder="km"> <label for="duration">Duration</label> <input class="usr__input" type="text" name="" id="duration" placeholder="min"> <label for="elev__cad" id="cadlbl">Cadence</label> <label for="elev__cad" id = "elevlbl">Elev Gain</label> <input class="usr__input" type="text" name="" id="elev__cad" placeholder="step/min"> <!-- <input style="display: none;" class="usr__input" type="text" name="" id="cadence" placeholder="step/meter"> --> </form> </div> </body>js parte:
class test{ constructor(){ document.querySelector('.input__form').addEventListener('submit', function(e){e.preventDefault(); console.log('inside form submit handler'); }); document.querySelector(".input__div").addEventListener("keydown", ()=> console.log('inside keyboard handler')); } } new test();y si ejecuta el código, verá que parece que el detector de eventos del formulario de envío nunca se ejecutó, ¡ya que solo el 'controlador de teclado interno' se imprimiría en la consola cada vez!