Skip to content

06.EVENTOS.md

Latest commit

 

History

History
151 lines (112 loc) · 4.05 KB

06.EVENTOS.md

File metadata and controls

151 lines (112 loc) · 4.05 KB

EVENTOS

1. Introducción

En Javascript existen 3 formas de gestionar los eventos. De menos a más recomendada tenemos:

  1. Mezclando HTML y Javascript.
  2. Separando HTML y Javascript y usando un método.
  3. Separando HTML y Javascript y usando un escuchador de eventos.

A continuación se muestra el mismo ejemplo en cada una de estas formas.

Ejemplo 1

<elemento onclick=" /* hacer algo */ ">    </elemento> 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Eventos 1</title>
</head>
<body>
  // El código return false evita que se ejecute el coportamiento por defecto
  <a href="https://www.google.es" 
     onclick=" alert ('Has pulsado en enlace de GOOGLE'); return false; "> GOOGLE </a>
</body>
</html>

Ejemplo 2

elemento.onclick = function() { /* hacer algo */ }
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Eventos 2</title>
</head>
<body>
  <a id="enlace" href="https://www.google.es"> GOOGLE </a>

<script>
let enlace = document.querySelector('#enlace');

enlace.onclick = function (event) {
  alert ('Has pulsado en enlace de GOOGLE');
  event.preventDefault();    // Evita que se ejecute el comportamiento por defecto
}
</script>

</body>
</html>

Ejemplo 3

elemento.addEventListener('click', function(){ /* hacer algo */ } );
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Eventos 3</title>
</head>
<body>
  <a id="enlace" href="https://www.google.es"> GOOGLE </a>

<script>
let enlace = document.querySelector('#enlace');

enlace.addEventListener('click', function (event) {
  alert ('Has pulsado en enlace de GOOGLE');
  event.preventDefault();    // Evita que se ejecute el comportamiento por defecto
});

</script>

</body>
</html>

El mismo ejemplo anterior con varios escuchadores en un mismo evento.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Eventos 3</title>
</head>
<body>
  <a id="enlace" href="https://www.google.es"> GOOGLE </a>

<script>
let enlace = document.querySelector('#enlace');

enlace.addEventListener('click', function (event) {
  alert ('Has pulsado en enlace de GOOGLE');
});

enlace.addEventListener('click', function (event) {
  alert ('Ya te he dicho que has pulsado el enlace de GOOGLE,¿no?');
});

enlace.addEventListener('click', function (event) {
  if (!confirm ('¿Deseas acceder a esta página?') )
    event.preventDefault();     // Evita que se ejecute el comportamiento por defecto
});
</script>

</body>
</html>

2. Resumen

La primera forma está desaconsejada, prácticamente está obsoleta.

La segunda forma es simple y está soportada por la mayoría, sino todos, los navegadores.

La tercera forma tiene peor soporte que la anterior, pero esto está mejorando rápidamente debido a la continua actualización de los navegadores actuales. Las principales ventajas de la tercera forma son que puedes eliminar el código del controlador de eventos si es necesario, utilizando removeEventListener (), y puedes agregar múltiples escuchadores del mismo tipo a los elementos si es necesario. Por ejemplo, puedes llamar a addEventListener ('click', function () {...}) en un elemento varias veces, con diferentes funciones especificadas en el segundo argumento. Esto es imposible de realizar con la segunda forma porque cualquier intento posterior de establecer una propiedad sobrescribirá las anteriores.