La delegación de eventos en Javascript nos sirve en muchos casos y de determinadas maneras, supongamos que tenemos una web app en donde existen varios formularios, con muchos botones y cada vez que hacemos click en un botón este tiene que ejecutar un evento. Lo más normal del mundo es recurrir a recorrer cada boton el cual tiene asignada una clase un un id ( siempre es preferible usar id y dejar los selectores de clase para css) y por cada vez que se ejecute un click se dispare un evento por cada boton.
Bien, digamos que en una aplicación chica, esto puede sonar razonable, pero en cuanto necesitemos agregar complejidad y tengamos muchos botones que al hacer click despliegue el mismo evento… la aplicación estaría cargando en el DOM un evento por cada boton, por lo que el rendimiento se vería afectado, además de esto por ejemplo si al hacer click ese evento creara por ejemplo otro formulario con otro botón en la misma página, el evento de ese botón no sería escuchado.
La mejor solución para esto es la delegación de eventos, que nos permite manejar esto de una mejor manera:
Lo ideal es encerrar los botones y/o cualquier tipo de elementos que maneje un solo evento adentro de un contenedor, como un div, y a los botones proporcionarles un id idéntico para todos:
<div id="losBotones">
<div id="losBotones">
<button id=‘boton’></button>
<button id='boton'></button>
<button id='boton'></button>
<button id='boton'></button>
<button id='boton'></button>
</div>
Ahora guardar ese contenedor en una variable y escuchar el evento del contenedor losBotones:
const boton = document.querySelector('#losBotones’);
boton.addEventListener('click', (e) =>{
if(e.target.id === 'boton'){
alert('Es un boton');
}
})
Creamos una función anónima y le pasamos por parámetro (e), que nos va a servir para poder escuchar el target, y agregamos una condición para que solo nos ejecute una función alert si damos click un botón, por lo que el div entero quedaría ignorado.
Y si nos ponemos mas juguetones con el target del evento podemos hacer cosas como cambiar el color de cada boton, como para que se entienda mejor el concepto:
<html>
<head> <title>Delegación de eventos</title>
<body>
<div id="losBotones">
<button id='boton' data-color="red">Boton1</button>
<button id='boton' data-color="green">Boton2</button>
<button id='boton' data-color="blue">Boton3</button>
<button id='boton' data-color="black">Boton4</button>
<button id='boton' data-color="orange">Boton5</button>
</div>
<script>
const botones = document.querySelector('#losBotones');
const boton = document.querySelector('#boton')
botones.addEventListener('click', (e) =>{
if(e.target.id === 'boton'){
e.target.style.background = e.target.dataset.color;
}
})
</script>
</body>
</html>
Top comments (0)