I have HTML div with class wrapper_menu, the div class mainBlock is generated trought JS class and appended to wrapper_menu.

The task is to get addEventListener on wrapper_menu to delegate it and call it when any part of mainBlock is clicked, then to use mainBlocks id to call function depending on id.

The problem is when I get such construction, in console.log it shows me children elements too if i click on them (because obviously they are there), I have tried to use eventcurrentTarget.children but it doesnt let work with them since they are HTMLcollection.

is there a way to use delegation here without Jquery? I can use onclick medthod or add eventlistener to each mainBlock but the idea was to implement delegation.

Thank you for help

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>