submit (on the form) fires on send — call preventDefault() to handle it in script. input fires on every value change (live); change when a field commits. focus/blur track entering/leaving fields. Reading input.value (or FormData) inside these handlers is how DHTML validated and processed forms without a reload.
<!doctype html><html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;padding:20px"><form id="f"><input name="q" placeholder="type"><button>go</button></form><p id="o"></p>
<script>document.getElementById('f').addEventListener('submit',e=>{e.preventDefault();document.getElementById('o').textContent='got: '+e.target.q.value;});</script></body></html>