If we have a form which we can submit it by pressing Enter key on the keyboard, so when we are on the form and then press Enter, what event first triggered, form submit event or keyboard (either of keydown, key press or keyup) event?!
Edition
Here is my test code for the above problem: https://codepen.io/ultimateblue-the-selector/pen/gOxrapj?editors=1111
html part:
<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 part:
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();
and if you run the code you will see that it seems the submit form event listener never executed, as only the 'inside keyboard handler' would be printed on the console every time!!