HowTo donde aprenderás con ejemplos sencillos cómo funcionan los eventos y manejadores de eventos con ECMAScript 6>.
¿Qué es un evento?
Un evento no es más que una señal que se activa cuando algo sucede en una página web o documento. Todos los nodos del DOM y ciertos atributos HTML pueden generar señales. Veamos una lista de los eventos más utilizados:
Eventos de ratón:
- click y dblclick – Cuando se hace clic o doble clic en uno de los elementos.
- contextmenu – Cuando se usa el botón derecho del ratón.
- mouseover y mouseout – Cuando el puntero se sitúa un elemento o sale de el.
- mousedown y mouseup – Cuando con el ratón hacemos clic y soltamos.
- mousemove – Cuando se mueve el ratón.
- mousewheel – Cuando se usa la rueda del ratón.
Eventos de HTML (formularios):
- load y unLoad – Cuando el navegador termina de procesar la página o cuando abandonamos esta para irnos a otra.
- change – Cuando un elemento de formulario (select, text, textarea) pierde el foco del cursor y su valor ha sido cambiado.
- submit – Cuando se envía el formulario.
- focus y blur – Cuando se activa o se hace uso de un elemento o cuando se pierde el enfoque de este (por el usuario)
- select – cuando se selecciona el valor de un elemento de formulario (text, textarea)
- reset – Cuando se pulsa el botón reset de formulario.
- otros eventos: error, resize, scroll
Eventos de Teclado:
- keydown, keyup y keypress – Cuando se presiona, se suelta o se mantiene presionada una tecla del teclado.
Eventos del Documento:
- DomContentLoaded – Cuando el código HTML es cargado y procesado.
¿Qué son los manejadores de eventos?
Para poder reaccionar a estos eventos, necesitamos incluir lo que llamaremos un manejador del evento (handler), que será una función que se ejecuta en caso de que el evento sea activado.
Por lo que los manejadores de eventos son los que nos permitirán ejecutar código JavaScript en caso de que el usuario realice una acción determinada.
Tenemos muchas formas de incluir un manejador a un evento:
Eventos usando atributos HTML
Un manejador puede ser creado haciendo uso de un atributo HTML al que llamaremos on<evento>. Por lo que para asignar un manejador al evento click a través de un botón de formulario u otro tipo de elemento HTML5 podemos hacer lo siguiente:
|
1 |
<input value="Haz clic aquí" onclick="alert('Has hecho clic!')" type="button" /> |
Al hacer clic en el botón se activa el manejador del evento click (onclick), el cual ejecuta la función o método asignado (en este caso el método alert()).
Siempre que incluyamos código HTML entrecomillado con comillas dobles (onclick=””), dentro del contenido de este debemos hacer uso de comillas simples para que trabaje correctamente.
… dando un pasito más
Escribir código JavaScript dentro del valor de un atributo HTML no es el mejor lugar, por lo que es más adecuado crear una función que ejecute dicho código.
|
1 2 3 4 5 6 7 8 |
<a href="" onclick="mostrarLOPD(); return false;">Mostrar LOPD</a> <div class="lopd" style="display:none">Contenido protección de datos</div> <script> function mostrarLOPD() { let legal = document.querySelector(".lopd"); legal.style.display = "block"; } </script> |
Ya sabemos que HTML no es sensible a maýusculas y minúsculas por lo que onclick trabaja de la misma forma que ONCLICK. Aún así es recomendable escribir este tipo de código en minúsculas.
Eventos con propiedades del DOM
Podemos asignar un manejador a un evento haciendo uso de una propiedad del DOM. Por lo que el manejador del evento será la propiedad del DOM y el atributo HTML es la forma que tenemos de inicializarlo. Es mejor verlo con un ejemplo:
|
1 2 3 4 5 6 |
<button id="btn">Haz click, porfavor</button> <script> btn.onclick = function() { alert('Has hecho click en el botón'); } </script> |
Para ello tan solo tenemos que hacer referencia al identificador del botón (btn) seguido del evento (onclick) para así poder crear el manejador del evento.
Resumiendo … el funcionamiento es muy similar al usado con atributos HTML y las dos formas son totalmente válidas.
Otra forma correcta y muy fácil de entender es llamar a una función a través del mismo elemento DOM.
|
1 2 3 4 5 6 |
<button id="btn2">Haz click aquí</button> <script> function hola() { alert('Hola!'); } btn2.onclick = hola; |
Accediendo a elementos usando: this
El valor this dentro de un manejador de eventos contiene el valor del elemento.
|
1 |
<button id="btn" onclick="alert(this.innerText)">Haz clic</button> |
Por lo que en el ejemplo el valor de this.innerText será “Haz click”.
El método addEventListener()
Hasta ahora hemos visto cómo se crean eventos y cómo podemos manejarlos. Uno de los problemas que nos encontraremos al trabajar con eventos es la necesidad de incluir diferentes manejadores de eventos a un mismo evento con una misma propiedad.
|
1 2 3 4 5 |
<button id="btn">Clic</button> <script> btn.onclick = function() { alert("Hola"); } btn.onclick = function() { alert("Hola2"); } // sobrescribe al anterior </script> |
Si ejecutamos este ejemplo vemos que el segundo evento onclick sobrescribe al anterior. Así que para evitar este problema disponemos del método addEventListener().
|
1 |
addEventListener( evento, manejador [opciones] ) |
addEventListener recibe el nombre del evento “click”, el manejador será una función y las opciones serán propiedades del manejador (once, capture, passive)
Para eliminar un manejador de este tipo usaremos el método removeEventListener()
|
1 2 3 4 5 |
<button id="btn">Haz click</button> <script> btn.addEventListener( "click" , () => alert('Thanks!')); btn.removeEventListener( "click", () => alert('Thanks!')); </script> |
De esta forma sí que podemos crear múltiples manejadores del mismo evento y no van a sobrescribir al resto. Veamos un ejemplo algo más complejo:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<input type="checkbox" name="privacidad" id="privacidad" /> <span id="btn">Política privacidad</span> <div class="privacidad" style="display:none"> <p>Morbi magna molestiae rhoncus, unde porta. Tincidunt vehicula. Hymenaeos officia magni magni gravida, excepteur, leo porttitor cursus? Quod penatibus, voluptatum. <p>Nunc facere sodales nesciunt nibh fermentum temporibus culpa litora varius error mollis ullamcorper tempora totam molestie ultricies nihil, laboris quia. </div> <script> btn.addEventListener('click', function(){ privacidad = document.querySelector('.privacidad'); // select div privacidad.style.display === "none" ? privacidad.style.display = "block" : privacidad.style.display = "none"; }) btn.addEventListener('click', () => console.log("otro manejador del evento") ); // otro manejador btn.addEventListener( 'click', () => document.querySelector('.privacidad').style.color = "red" ); // otro manejador </script> |
JavaScript nos permite realizar la misma tarea de múltiples formas diferentes por lo que podemos separar la función en caso de necesitar utilizarla de nuevo.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<input type="checkbox" name="privacidad" id="privacidad" /> <span id="btn">Política privacidad</span> <div class="privacidad" style="display:none"> <p>Morbi magna molestiae rhoncus, unde porta. Tincidunt vehicula. Hymenaeos officia magni magni gravida, excepteur, leo porttitor cursus? Quod penatibus, voluptatum. <p>Nunc facere sodales nesciunt nibh fermentum temporibus culpa litora varius error mollis ullamcorper tempora totam molestie ultricies nihil, laboris quia. </div> <script> function showHide() { privacidad = document.querySelector('.privacidad'); // select div privacidad.style.display === "none" ? privacidad.style.display = "block" : privacidad.style.display = "none"; } btn.addEventListener('click', showHide); </script> |
