Así como los lenguajes de la vida cotidiana, los lenguajes de programación establecen una serie de reglas para el adecuado funcionamiento de su lógica. Por esto mismo, los lenguajes tienen parámetros que se ejecutan automáticamente si no los cambiamos. En este post te enseñaremos cuál es el comportamiento por defecto HTML y cómo cambiarlo si así lo deseas.
¿Cuál es el comportamiento por defecto HTML?
Hay componentes de HTML a los que el navegador les asigna unas acciones determinadas. A esto lo conocemos como el comportamiento por defecto HTML. El ejemplo más lógico y que seguramente pasa por tu cabeza es el del elemento o etiqueta HTML a.
La etiqueta HTML <a>, también conocida como anchor, es un elemento creado para el manejo de enlaces. En esta etiqueta, el comportamiento por defecto HTML define que nos lleva a donde indica su atributo href.
Si quieres conocer más sobre esta etiqueta, te invitamos a leer el post <a> en la página oficial de Mozilla Developer Network.
¿Cómo cambiar el comportamiento por defecto HTML?
La mayoría de reglas en un lenguaje de programación tienen una manera de ser cambiadas. Lo mismo sucede con el comportamiento por defecto HTML, pues podemos decirle al navegador que no ejecute este comportamiento usando el comando preventDefault.
Entonces, supongamos que tenemos la siguiente línea de código con el elemento <a> y su atributo href. En este ejemplo el atributo nos dirige a Google España:
<a href=»https://google.es»> Ir a google </a>
Ahora que hemos insertado esta línea de código, veremos el texto Ir a google con una raya que indica que es un enlace. Debido al comportamiento por defecto HTML, cuando pulsamos este texto seremos redirigidos de nuestra página web a Google. Es decir, la etiqueta a cambia nuestra URL por aquella insertada en su atributo href. En este sentido, el enlace HTML está reaccionando con el evento click sin que nosotros hayamos metido código JavaScript, porque esta reacción está automatizada por el navegador.
Una de las formas en la que podemos editar este comportamiento es al insertar la propiedad target con el valor «_blank» para hacer que el enlace se abra en una nueva pestaña y no modifique nuestra pestaña actual:
<a href=»https://google.es» target=»_blank»> Ir a google </a>
Ahora, para evitar el comportamiento por defecto HTML por completo usaremos el comando preventDefault en nuestro código JavaScript. Este comando funciona como parámetro del método addEventListener. Es decir, debemos usar primero alguno de los métodos para seleccionar nodos en el DOM. A continuación, hemos decidido usar el método querySelector y el nombre de la etiqueta para seleccionar el nodo creado anteriormente:
document.querySelector (‘a’)
Después de seleccionar el nodo del que queremos eliminar el comportamiento por defecto HTML, debemos usar el método addEventListener. Dentro de este método definimos el evento a modificar y luego, como segundo comando, definimos una función que llama al comando preventDefault. Así, el comando preventDefault se comportará como una función manejadora del evento determinado, en este caso click. A continuación, te mostramos cómo:
document.querySelector (‘a’).addEventListener (‘click’, (event) => {
event.preventDefault ( )
}
Si quieres conocer más sobre este comando, te invitamos a leer el artículo event.preventDefault en la MDN.
Al redactar esta línea de código, veremos en nuestro navegador que hacer clic sobre el enlace no genera ninguna reacción. Ahora que hemos hecho esto, podremos reescribir el comportamiento por defecto. A continuación, puedes ver cómo hemos hecho que el enlace ahora siga el valor de window.location.href:
document.querySelector (‘a’).addEventListener (‘click’, (event) => {
event.preventDefault ( );
window.location.href = «https://google.com»;
});
Si quisieras que, además, este enlace se abriera en una nueva pestaña, tendrías que usar el comando window.open en vez de window.location.href:
window.open (‘https://google.com’)
Aunque este ejemplo no es muy revolucionario, nos permite entender cómo funciona el comportamiento por defecto HTML y cómo modificarlo.
¿Quieres seguir aprendiendo?
Ahora que conoces cuál es el comportamiento por defecto HTML y cómo cambiarlo, seguro que quieres seguir aprendiendo sobre el mundo del desarrollo web. Por ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación intensiva ideal para ti. ¡No te lo pierdas y pregunta por más información!
