Asignación de manejadores en bucle en JavaScript
En la lección anterior, aprendimos a crear nuevos elementos en un bucle. Ahora vamos a asignar manejadores de eventos al crear nuevos elementos.
Supongamos que tenemos nuevamente este div principal:
<div id="parent"></div>
Ejecutemos un bucle que agregue al final de nuestro
div 9 nuevos párrafos, asignándoles
un manejador de clic:
let parent = document.querySelector('#parent');
for (let i = 1; i <= 9; i++) {
let p = document.createElement('p');
p.textContent = '!';
// Asignamos el manejador de clic:
p.addEventListener('click', function() {
console.log(this.textContent);
});
parent.appendChild(p);
}
Dado un div. Ejecuta un bucle que agregue
a nuestro div 5 inputs. Supongamos que también hay un
párrafo. Haz que cada uno de los nuevos
inputs al perder el foco escriba su texto
en el párrafo.