Tengo HTML div con clase wrapper_menu, el mainBlock de clase div se genera a través de la clase JS y se agrega a wrapper_menu.

La tarea es obtener addEventListener en wrapper_menu para delegarlo y llamarlo cuando se hace clic en cualquier parte de mainBlock, luego usar la identificación de mainBlocks para llamar a la función según la identificación.

El problema es cuando obtengo dicha construcción, en console.log también me muestra elementos secundarios si hago clic en ellos (porque obviamente están allí), he intentado usar eventcurrentTarget.children pero no deja trabajar con ellos ya que son colección HTML.

¿Hay alguna manera de usar la delegación aquí sin Jquery? Puedo usar el método onclick o agregar eventlistener a cada bloque principal, pero la idea era implementar la delegación.

Gracias por ayudar

 wrapper_menu.addEventListener("click", (e) => { console.log(e.target); }) <div class="wrapper_menu"> <div class="mainBlock" id="1"> <div class="block"> <div class="ddTopic"> <img class="book" <span class="item_title"></span> <span class="item_description"></span> </div> </div> </div>