Quiero agregar un detector de eventos a un elemento HTML que reemplaza el comportamiento predeterminado por un comportamiento personalizado. Conozco dos formas diferentes de agregar detectores de eventos: (1) use la función de JavaScript addEventListener para agregar un evento a un elemento DOM:
<form class="my-form"> <input type="submit"/> </form> <script> document.querySelectorAll(".my-form").forEach(form => { form.addEventListener("submit", doSomething); }); function doSomething(e) { e.preventDefault(); console.log("Data received"); } </script> (2) use los atributos HTML on* :
<form onsubmit="doSomething()"> <input type="submit"/> </form> <script> function doSomething(e) { e.preventDefault(); console.log("Data received"); } </script>Sin embargo, el primero hace lo que debe hacer, el segundo no. El segundo código todavía usa el controlador de envío predeterminado. Entonces, me pregunto si el comportamiento del primer ejemplo se puede lograr con atributos HTML. Y además, me gustaría saber qué forma de agregar controladores de eventos se prefiere generalmente.
Use la primera versión, pero no use querySelectorAll si solo tiene un formulario. Si solo tiene un formulario, asígnele una ID y use document.getElementById en su lugar.
Si tienes muchos, yo delegaría:
<div id="formContainer"> <form class="my-form"> <input type="submit"/> </form> <form class="my-form"> <input type="submit"/> </form> </div> <script> document.getElementById("formContainer").addEventListener("submit", function(e) { e.preventDefault(); console.log("Data received"); }); </script>Para hacer el segundo, solíamos hacer esto en el milenio anterior.
<form onsubmit="return doSomething()"> <input type="submit"/> </form> <script> function doSomething() { console.log("Data received"); return false } </script>pero no es recomendable
En el segundo caso, está llamando a doSomething() sin argumentos, por lo que e no estará undefined . Debe pasar el evento como un argumento explícitamente:
<form onsubmit="doSomething(event)">