Home/ Questions/Q 7414233
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T07:04:13+00:00

I am trying to implement event delegation with the following code: <html> <head> <script>

  • 0

I am trying to implement event delegation with the following code:

<html>
<head>
<script>
document.addEventListener('click', function(e){
    alert(e.target.className);
}, false);
</script>
</head>
<body>
<ul class="list">
    <li class="item">A</li>
    <li class="item">B</li>
    <li class="item">C</li>
    <li class="item">D</li>
</ul>
</body>
</html>

I want the event to bubble so that, when I click on an <li> item, an alert shows item, and then another alert shows list. But this code only gives the alert with item. How can I modify it so that the event bubbles?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Event callback is only triggered once, but it does not mean the event does not bubble. The callback is only executed when the very element listens to the event.

    If you really want the alert to be triggered all the way back to the ancestors, in your callback, add the alerts for the ancestors one by one. You dont have to add listeners to all the ancestors, which would cause consuming more memory.

    • 0