Cómo manejar el manejo de eventos en JavaScript (ejemplos y todo)

En este blog, intentaré aclarar los fundamentos del mecanismo de manejo de eventos en JavaScript, sin la ayuda de ninguna biblioteca externa como Jquery / React / Vue.

Explicaré los siguientes temas en este artículo:

  1. Los objetos de documento y ventana , y agregarles Event Listeners .
  2. El método Event.preventDefault () y su uso.
  3. El método Event.stopPropagation () con un ejemplo.
  4. Cómo eliminar un detector de eventos de un elemento.

Objetos de ventana y documento con Event Listeners

El objeto Ventana representa la pestaña. En caso de que esté leyendo este blog en su navegador correspondiente, su pestaña actual representa el objeto Ventana.

El objeto de ventana tiene acceso a información como la barra de herramientas, la altura y el ancho de la ventana, avisos y alertas. Veamos cómo podemos agregar un detector de eventos (mousedown) al objeto de ventana y analizar algunas de sus propiedades.

Cómo agregar el oyente en el objeto de ventana

El método addEventListener es la forma más preferida de agregar un detector de eventos a una ventana , documento o cualquier otro elemento del DOM.

Hay una forma más llamada propiedad "on" onclick, onmouseover, etc. Pero no es tan útil, ya que no nos permite agregar múltiples detectores de eventos en el mismo elemento. Los otros métodos lo permiten.

Un objeto de evento se pasa como un argumento (opcional) al controlador que contiene toda la información relacionada con el evento (en nuestro caso, mousedown) en la ventana.

Abra las herramientas de desarrollador (Inspeccionar elemento) en esta página y copie, pegue el siguiente código en el panel de la consola y presione enter.

window.addEventListener("mousedown",function(event){ alert("window"); console.log(event); });

Después de eso, puede ir a cualquier sección de la pestaña actual y hacer clic derecho para ver la consola y la información relacionada con este evento, como se muestra a continuación en la instantánea.

Nota : Si va a cualquier otra pestaña y hace clic con el botón derecho, este evento no se activará, ya que pertenece solo a esta pestaña (objeto Ventana).

Los detalles del evento mousedown

En las siguientes líneas, explicaré algunas de las propiedades capturadas importantes correspondientes al evento de mousedown que acabamos de realizar.

button : Como este fue el evento de mousedown, le dirá el botón en el que hizo clic. Para el mouse, la izquierda, el medio y la derecha corresponden a 0, 1 y 2 respectivamente. Si hace clic en el botón derecho, puede ver el valor 2.

clientX y clientY : Posición relativa a la parte superior izquierda del área de contenido (Viewport). Simplemente analice el valor de estas propiedades con el lugar donde hizo clic y podrá ver cómo están relacionadas. Incluso si se desplaza hacia abajo en la página, estas propiedades siguen siendo las mismas. Referencia de ScreenX y ScreenY desde la parte superior izquierda de la pantalla (Monitor).

altkey / ctrlkey : si mantiene presionada alguna de estas teclas mientras realiza la operación de clic derecho, puede ver que estos valores son verdaderos. De lo contrario, son falsas como en nuestro caso.

objetivo: corresponde al elemento sobre el que realizaste la acción. Cualquiera que sea el elemento en el que haya hecho clic, puede ver la información correspondiente a esta propiedad en la consola

¿Qué es un objeto de documento ?

El documento consta de lo que hay dentro de la ventana interior. El objeto de documento es la raíz de todos los nodos del DOM. Si está cargando una página HTML en el navegador, el documento representa esa página completa.

El método Event.preventDefault () y su uso

En algún momento, no queremos que un elemento HTML se comporte de la forma en que se supone que debe comportarse por defecto. En tal caso, podemos utilizar este método.

Ejemplo : al hacer clic en el elemento de anclaje, el navegador redirigirá a esa página de forma predeterminada. Tratemos de evitar eso.

  Google  let link = document.querySelector("a"); // It is the method to access the first matched element link.addEventListener("click", function(event) { console.log("Redirecting Stopped"); event.preventDefault(); });   

Puede crear un archivo HTML y consultar este código.

El método Event.stopPropagation ()

Los eventos fluyen hacia afuera. Hay ciertos casos, como cuando tiene elementos anidados y realiza algún evento en un niño y termina realizando alguna acción en el padre, también, que desea evitar. En tales casos, este método es útil.

Suena un poco confuso, pero espero que el siguiente ejemplo se lo aclare.

Imagine que tiene un botón dentro de un párrafo y ha adjuntado un evento de mousedown a ambos. Desea lograr los siguientes casos de uso:

  1. Si hace clic con el botón derecho en el botón, debería mostrar que se ha hecho clic en él y no se propaga al elemento principal (es decir, el párrafo).
  2. Si hizo clic con el botón izquierdo en el botón, entonces debería propagarse hacia afuera normalmente y disparar el detector de eventos de párrafo también.

Solución:

Hello Ho Button2

// Event Listener on the Button and it's logic document.getElementById("button12").addEventListener("mousedown", function(event) { alert("button clicked"); if (event.button == 2) // Right Click event.stopPropagation(); }); // Event Listener on the paragraph element with it's logic: document.getElementById("demo").addEventListener("mousedown", function(event) { alert("Paragraph clicked"); });

Eliminar un detector de eventos de un elemento

Para eliminar un detector de eventos de un elemento, debemos llamar al método removeEventListener con el nombre del evento y el nombre de la función.

Nota : cuando se pasan funciones anónimas, no tienen asignación de memoria. Por tanto, debemos definir esas funciones fuera de la devolución de llamada y luego hacer referencia a ellas aquí en la devolución de llamada removeEventListener.

Document.getElementbyId("id_name").removeEventListener("click",fn_name)

Si ha llegado a este punto, debe tener una comprensión adecuada de cómo funcionan los escuchas de eventos en JavaScript.

Si, mientras trabaja con su biblioteca / Frameworks favoritos, alguna vez se queda atascado en la parte de Gestión de eventos, estos conceptos básicos deberían ayudarlo a resolver el problema.