In my application I have a couple of scripts, common and page-specific ones.

# menu.js, loaded on each page
document.addEventListener('DOMContentLoaded', () => {
  document.querySelector(".navbar-menu").addEventListener('click', () => {
    ...
  });
})


# index.js, page specific
document.addEventListener('DOMContentLoaded', () => {
   ... do other stuff for this side
   
})

The second part is never executed, obviously DOMContentLoaded is triggered only once. Before I was using jQuery and it was no problem to have jQuery(function () {... multiple times.

How is it done in Vanilla JS? How do I ensure, the second script is running after DOM is loaded completely?

My first idea was to put dispatchEvent(new Event('DOMContentLoaded')) at the end of the first part. But then I get error InternalError: too much recursion.