how to read a child by add click event on parent?

Question

I am printing the table dynamically and I added a click event on the whole parent. But the click event is invoking without any click.and when I print by the table and when I press the child button the event listener is not responding?

document.querySelector("#mL").addEventListener('click',EandD);
         var EandD = function(event){
            var itemid =  event.target.parentNode.id;
            console.log(itemid);
            
            }

<!--the table prints dynamically from firebase server-->
<tbody class='movie-list' id="mL">

        {  <!--  <tr>
     <th scope="row">1</th>
      <td><button type="button" class="btn btn-warning d-inline-block"><ion-icon class="del" name="create-outline"></ion-icon></button><button type="button" class="btn btn-success d-none"><ion-icon class="del"name="checkmark-circle-outline"></ion-icon></button> </td>
      <td> <button type="button" class="btn btn-danger"><ion-icon class="del"name="close-circle-outline"></ion-icon></button></td>
    </tr> -->}
        </tbody>

Answer 1

Try wrapping the table in a clickable element like <button> or <a> and then attach an onClick function:

<button onClick={handleTableClick}>
    <tbody class='movie-list' id="mL">
        ....
    </tbody>
</button>

Then define handleTableClick function to handle click events.

function handleTableClick(event) {
    ....
}