Cómo funciona la delegación de eventos de JavaScript -

Una de las metodologías más populares en el mundo de JavaScript es la delegación de eventos, y por una buena razón. La delegación de eventos le permite evitar agregar detectores de eventos a nodos específicos; en cambio, el detector de eventos se agrega a uno de los padres. Ese detector de eventos analiza los eventos burbujeados para encontrar una coincidencia en los elementos secundarios. El concepto básico es bastante simple, pero muchas personas no entienden cómo funciona la delegación de eventos. Permítanme explicarles cómo funciona la delegación de eventos y brindarles un ejemplo de JavaScript puro de delegación de eventos básica.

Digamos que tenemos un ULelemento padre con varios elementos hijos:

ulliArtículo 1/liliArtículo 2/liliArtículo 3/liliArtículo 4/liliArtículo 5/liliArtículo 6/li/ul

Digamos también que algo debe suceder cuando se hace clic en cada elemento secundario. Podrías agregar un detector de eventos separados para cada LIelemento individual, pero ¿qué pasa si LIlos elementos se agregan y eliminan con frecuencia de la lista? Agregar y eliminar detectores de eventos sería una pesadilla, especialmente si el código de adición y eliminación se encuentra en diferentes lugares dentro de su aplicación. La mejor solución es agregar un detector de eventos al ULelemento principal. Pero si agrega el detector de eventos al padre, ¿cómo sabrá en qué elemento se hizo clic?

Simple: cuando el evento llega al ULelemento, verifica la propiedad de destino del objeto del evento para obtener una referencia al nodo real en el que se hizo clic. Aquí hay un fragmento de JavaScript muy básico que ilustra la delegación de eventos:

// Obtenga el elemento, agregue un detector de clics...document.getElementById("parent-list").addEventListener("click", function(e) {// ¡e.target es el elemento en el que se hizo clic!// Si lo fuera un elemento de listaif(e.target e.target.nodeName == "LI") {// ¡Elemento de lista encontrado! Genera el ID!console.log("Elemento de lista ", e .target.id.replace("post-" , ""), " ¡se hizo clic!");}});

Comience agregando un clickdetector de eventos al elemento principal. Cuando se activa el detector de eventos, verifique el elemento del evento para asegurarse de que sea el tipo de elemento al que reaccionar. Si es un LIelemento, boom: ¡tenemos lo que necesitamos! Si no es un elemento que queremos, el evento se puede ignorar. Este ejemplo es bastante simple ULy LIes una comparación directa. Intentemos algo más difícil. Tengamos un DIV principal con muchos hijos, pero lo único que nos importa es una Aetiqueta con la classAclase CSS:

// Obtenga el DIV principal, agregue el oyente de clics...document.getElementById("myDiv").addEventListener("click",function(e) {// e.target fue el elemento en el que se hizo clic si (e.target e.target .matches("a.classA")) { console.log("¡Se hizo clic en el elemento de anclaje!");}});

Usando la API Element.matches, podemos ver si el elemento coincide con nuestro objetivo deseado.

Dado que la mayoría de los desarrolladores usan una biblioteca JavaScript para su elemento DOM y manejo de eventos, recomiendo usar el método de delegación de eventos de la biblioteca, ya que son capaces de delegación avanzada e identificación de elementos.

¡Esperamos que esto te ayude visualmente al concepto detrás de la delegación de eventos y te convenza del poder de la delegación!