Explicación resumida de preventDefault()
El método preventDefault() forma parte de los objetos evento de Javascript y sirve, como su nombre indica, para prevenir el comportamiento por defecto de un evento.
Dónde encontramos el método preventDefault() del objeto evento
Para poder usar el método preventDefault() debemos estar dentro de un manejador de evento de Javascript. Todos los manejadores de eventos reciben como parámetro el objeto evento que se ha generado.
Las explicaciones detalladas sobre el objeto evento las encuentras en el artículo de Eventos en Javascript.
Por ejemplo tenemos este código para definir un manejador de eventos:
document.getElementById('formulario').addEventListener('submit', function(event) {
// Esto es un manejador de eventos
})
Este manejador de eventos, como todos en Javascript, recibe el objeto evento. En ese código el objeto evento lo tienes en el parámetro que hemos llamado 'event'.
Sobre ese objeto evento, en este caso el parámetro event, es sobre el que podemos invocar el método preventDefault().
document.getElementById('formulario').addEventListener('submit', function(event) {
event.preventDefault();
})
Nota que todos los manejadores de eventos reciben por parámetro el objeto evento, aunque a veces si no lo usas para nada no lo escribas en el manejador.
document.getElementById('formulario').addEventListener('submit', function() {
// este manejador aunque reciba el objeto evento no lo estamos declarando como parámetro
// recibirlo lo recibirá, pero como no hemos declarado el parámetro no podemos usar el objeto evento dentro del manejador
})
La utilidad de preventDefault() depende del tipo de evento
En la práctica, el significado de preventDefault() depende del tipo de evento sobre el que estamos definiendo este manejador. Por ejemplo:
- Si es un evento submit, sobre un formulario ¿Cuál sería el comportamiento por defecto del formulario al hacer submit? pues se enviaría. Entonces preventDefault() detendrá el envío del formulario.
- Si es un evento click sobre un enlace ¿Cuál sería el comportamiento predeterminado de un enlace al hacer clic? pues se navegará a la dirección del href del enlace. Entonces preventDefault() detendría esa navegación.
- ¿Que pasaría al hacer click sobre un checkbox? pues cambiaría su estado. Si en el evento click del checkbox llamamos a preventDefault() dentendremos ese comportamiento.
Así puedes tener decenas de ejemplos típicos de preventDefault(). Por ejemplo una práctica bastante común es usarlo cuando estamos validando un formulario. Si el formulario se detecta que no es válido, entonces se ejecuta preventDefault() para asegurarnos que no se envía. También puedes usar preventDefault() para evitar que el formulario se envíe al pulsar la tecla enter.
Espero haberte ayudado.