Puede usar document.querySelectorAll para obtener todos los divs y luego agregar los detectores de eventos dentro de un bucle.

 const divs = document.querySelectorAll('.parent > .child') for (const div of divs) { div.addEventListener('...', () => { // ... }) }

Solo necesita seleccionar los elementos secundarios. Por ejemplo, utilizando querySelectorAll.

 const childs = document.querySelectorAll(".parent .child"); childs.forEach(c => c.addEventListener("click", (e) => { alert(); }))

 <p>Click of one of the tests p tags!</p> <div class='parent'> <div class='child'> <p>test</p> </div> <div class='child'> <p>test</p> </div> <div>

Utilice la delegación de eventos . En lugar de agregar oyentes a muchos elementos, agregue uno al padre y deje que capture eventos de sus elementos secundarios a medida que "hacen burbujas" en el DOM. La función del controlador puede verificar qué elemento secundario se ha activado y luego <hacer algo> dependiendo de ese resultado.

En este ejemplo, comprobamos que el elemento en el que se ha hecho clic es un elemento p que es hijo de un elemento con una clase .child y registramos su contenido de texto.

 const parent = document.querySelector('.parent'); parent.addEventListener('click', handleClick, false); function handleClick(e) { if (e.target.matches('.child p')) { console.log(e.target.textContent); } }

 p:hover { cursor: pointer; color: red; }

 <div class="parent"> <div class="child"> <p>Test 1 - will be logged</p> </div> <div> <p>Test 2 - will not be logged</p> </div> <div class="child"> <p>Test 3 - will be logged</p> </div> <div> <p>Test 4 - will not be logged</p> </div> </div>