innerHTML = "" remove child nodes eventsListeners?

Question

Here is some simple code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="p">
      <button class="c1">Click</button>
      <button class="c2">whatever</button>
    </div>
    <script>
      document.querySelector('.c1').addEventListener('click', () => {
        console.log('Click c1')
      })
      document.querySelector('.c2').addEventListener('click', () => {
        document.querySelector('.p').innerHTML = ''
      })
    </script>
  </body>
</html>

I can inspect some dom element and get the eventListeners in browser, but I want to know whether the child nodes eventListener gets removed after parentNode.innerHTML = ''. eg: after click button.c2, how can I know eventListener on button.c1 and button.c2 get removed? if dom get removed ,so the corresponding eventListener also get removed? is there some memory leak issue?

https://stackoverflow.com/questions/595808/is-it-possible-to-append-to-innerhtml-without-destroying-descendants-event-list — CertainPerformance, Jun 02 '22 at 19:30
very close to my question. so I guess the use `innerHTML` will remove the event listens? — Archsx, Jun 02 '22 at 19:41

innerHTML = "" remove child nodes eventsListeners?

0 Answers0