Cómo utilizar el manejo de eventos en JavaScript 😱

Manejar eventos en JavaScript es una habilidad esencial para cualquier desarrollador web. Los eventos son acciones o interacciones que ocurren en una página web, como hacer clic en un botón, mover el cursor sobre un elemento o cargar una página. En JavaScript, podemos asignar una función para ejecutar cuando un evento específico ocurre.

Hay varias formas de asignar eventos en JavaScript, pero una de las formas más comunes es mediante el uso de la función addEventListener(). Esta función recibe dos parámetros: el tipo de evento y la función a ejecutar cuando el evento ocurre.

Por ejemplo, si queremos asignar un evento de clic a un botón con un id de "myButton", podemos escribir lo siguiente:

En este ejemplo, estamos buscando el elemento con el id "myButton" y asignando un evento de clic a él. Cuando el botón es clickeado, se ejecutará la función dentro de addEventListener() y mostrará una alerta diciendo "El botón ha sido clickeado".

También podemos asignar eventos a varios elementos al mismo tiempo usando un ciclo for y la función querySelectorAll(). Por ejemplo, si queremos asignar un evento de clic a todos los elementos con la clase "myClass", podemos escribir lo siguiente:

En este ejemplo, estamos buscando todos los elementos con la clase "myClass" y asignando un evento de clic a cada uno de ellos. Cuando uno de estos elementos es clickeado, se ejecutará la función dentro de addEventListener() y mostrará una alerta diciendo "Un elemento con la clase myClass ha sido clickeado".

En resumen, el manejo de eventos en JavaScript es una herramienta poderosa para crear interacciones dinámicas en las páginas web. Usando la función addEventListener() y querySelectorAll() podemos asignar eventos a elementos específicos o a varios elementos al mismo tiempo. Con esta habilidad, podemos crear aplicaciones web más interactivas y atractas