Posted on by MariaJose

Eventos de JavaScript: manéjelos like-a-pro

eventos de javascript

Maneje eventos de JavaScript como un profesional

El manejo de eventos de JavaScript es una parte crucial de cualquier aplicación web moderna. Todo desarrollador que quiera escribir un mejor código debe tener un conocimiento profundo de cómo funcionan los eventos, qué es la propagación de eventos y cómo usar la delegación de eventos para optimizar el manejo de eventos en nuestra aplicación.

Eventos de JavaScript

Antes de sumergirnos profundamente, primero aclaremos los conceptos básicos. A todo el mundo le encanta hacer clic en ese botón para ver cómo ocurre la magia, pero en el fondo de JavaScript ese clic es un evento y, similar a cuando el usuario interactúa con la página, sus acciones se capturan como eventos.

Para que un botón escuche un evento, debe registrar un oyente o un controlador (el término que más le convenga). Supongamos que tenemos un clic en un botón y queremos registrar un evento en el botón para medir cuántas veces se hace clic en el botón. Así es como lo haremos.

https://codepen.io/Divyesh_Puri/pen/abBwvRx

En este ejemplo, lo que hicimos fue tomar el elemento button con id usando querySelector y adjuntarle un evento usando addEventListener

 

Propagación de eventos de JavaScript

Ahora que sabemos qué es un evento y cómo adjuntar eventListener a un elemento. Veamos cómo funciona y cuántos eventos se activan cuando se hace clic en un botón (puede sorprender a muchos de ustedes).

<html>
  <body>
    <div id="button">
      <button class="button">Click me</button>
    </div>
  </body>
</html>

¿Qué piensas? ¿En cuántos elementos se activa un evento de clic si hago clic en ese botón de arriba?

Sin duda, será el botón en sí, pero también serán todos los antepasados del botón e incluso los objetos de documento y ventana.

¿Porqué es eso? Vamos a averiguarlo.

Un evento se propaga básicamente en 3 fases:

  1. Fase de captura: el evento comienza desde la ventana, el documento y las inmersiones profundas a través de todos los antepasados del elemento objetivo.
  2. Fase de destino: el evento encuentra su elemento de destino y se activa en el que el usuario ha interactuado.
  3. Fase de burbuja: el evento asciende en la jerarquía de manera similar a como se sumergió durante la fase de captura hasta que alcanza el documento y la ventana.
Eventos de JavaScript
capturando / burbujeando

 

Evento burbujeante

El burbujeo de eventos de JavaScript es la propagación de un evento desde su origen hacia el elemento raíz. Lo que significa que si se ha producido un evento en un botón, también lo activará su padre y el padre de su padre, y así sucesivamente hasta el elemento HTML.

Ahora veamos el evento burbujeando en acción.

https://codepen.io/Divyesh_Puri/pen/LYbLGpp

Ahora, si ha interactuado con un lápiz anterior, algunas cosas de las que se habrían dado cuenta al mirar la consola son.

  1. Cuando hace clic en la parte blanca, no pasa nada.
  2. Cuando se hace clic en el verde, se activa el evento GrandParent.
  3. Cuando se hace clic en el amarillo, se activa el evento tanto para parent como para GrandParent.
  4. Cuando se hace clic en azul, se activa el evento de los tres parent, GrandParent y child.

Ahora debe haberse dado cuenta de que todos los eventos, ya sea que sucedan en algún botón de la línea lateral o en el botón que desea que todos vean, cada uno desencadenará un evento en el elemento que los está cerrando.

 

Delegación de eventos de JavaScript

La aplicación moderna se basa en gran medida en eventos para proporcionar interfaces interactivas a los usuarios. Es muy común tener una gran cantidad de controladores de eventos en la página web, y es durante estos momentos que la delegación de eventos realmente puede brillar y puede marcar la diferencia.

Se sorprenderá de la cantidad de eventos que puede haber en algunos sitios de apariencia simple.

Un buen ejemplo de delegación de eventos sería crear una paleta de colores y adjuntar un detector de eventos a cada color, ya que queremos realizar algunas operaciones en él. Entonces, una forma de hacerlo será adjuntar un detector de eventos a cada elemento de color para que cuando el usuario haga clic en él, las operaciones se realicen. Como se muestra a continuación.

https://codepen.io/Divyesh_Puri/pen/poNwyZE

Si bien el enfoque que hemos adoptado es viable, no está tan optimizado como podría ser. Nuestra paleta tiene 150 colores y, como resultado, estamos agregando 150 oyentes para manejarlos todos. Además, si nuestro componente tuviera una característica que permitiera al usuario agregar colores personalizados, necesitaríamos agregar nuestro oyente a cada nuevo color agregado a la paleta.
Pero una mejor manera sería, como podría pensar, utilizar lo que hemos aprendido anteriormente y aplicarlo aquí. Para solucionar el problema mencionado en la sección anterior, reuniremos todo lo que hemos aprendido hasta ahora para hacer uso de una técnica llamada delegación de eventos.
Como todos los eventos aumentan, tal vez no necesitemos adjuntar todos los elementos de color al evento, lo que podemos hacer en su lugar es adjuntar ese evento en el elemento principal, por lo que cada vez que se hace clic en un elemento de color, aparece el elemento principal que luego activa la función. queríamos.

https://codepen.io/Divyesh_Puri/pen/zYozqww

 

Conclusión

Conocer un concepto simple de delegación de eventos en nuestro ejemplo se reduce de tener 150 eventos adjuntos a solo uno y estas pequeñas cosas importan cuando la aplicación se vuelve compleja y marca una diferencia real en el rendimiento.

Ahora que conoce este concepto, podrá crear aplicaciones complejas, interactivas y, al mismo tiempo, que no comprometan el rendimiento.

Gracias por leer y por cualquier comentario a continuación.

Recent Post