Like many others I use:

document.addEventListener('DOMContentLoaded',domLoadedFunc,!1);

In bination with window.onload to handle events that should fire as soon as the DOM has been loaded and parsed.

I was wondering if there is a reason to explicitly remove the DOMContentLoaded listener once it has fired.

Something along the lines of (inside our domLoadedFunc):

if(document.removeEventListener){
    document.removeEventListener('DOMContentLoaded',domLoadedFunc,!1);
}

Is there a reason to remove the DOMContentLoaded listener once it has fired?

Like many others I use:

document.addEventListener('DOMContentLoaded',domLoadedFunc,!1);

In bination with window.onload to handle events that should fire as soon as the DOM has been loaded and parsed.

I was wondering if there is a reason to explicitly remove the DOMContentLoaded listener once it has fired.

Something along the lines of (inside our domLoadedFunc):

if(document.removeEventListener){
    document.removeEventListener('DOMContentLoaded',domLoadedFunc,!1);
}

Is there a reason to remove the DOMContentLoaded listener once it has fired?

• javascript
• events
• dom
• listener

• 3 Nope, not really, it only fires once, and it's just one event handler, it won't break anything, so there's no good reason to explicitly remove it, but it won't hurt anything either, so whatever floats your goat. – adeneo Commented Apr 15, 2014 at 19:49
• I would necessary call document.removeEventListener but i could consider adding the {once: true} option when you register the event – Endless Commented May 22, 2017 at 14:38

1 Answer 1

Once the event has fired, it will not fire again. So, your code will not have any different oute if you remove it or not once it has fired the first time.

Technically, if you had a lot of event handlers all attached to the document object, it might be ever so slightly faster to remove event handlers that are no longer needed, but that is balanced with the extra code you write and execute just to remove it.

Personally, I code with thoughts in this sequence of priorities: correctness, reliability, readability, maintainability, simplicity and then performance and only do anything purely for performance sake when it's actually needed. So, following that hierarchy, I wouldn't remove the event handler because doing so is not needed for any of the first four priorities, doesn't help the simplicity of the code and isn't a performance issue that matters.

The one reason I have seen for removing an event handler like this is if you have multiple different events you are monitoring and once the first one is triggered, you want to make sure that you don't respond to any of the other events you're also monitoring. If you then remove the other handlers, then you don't have to keep a separate flag to keep track of the fact that you've already done your work (for example, if you were listening for both DOMContentLoaded and window.onload and just wanted to respond to whichever one happened first.

FYI, if you're interested in a plain javascript version of jQuery's $(document).ready() which works in all browsers (uses DOMContentLoaded when available, falls back to other means when not) which it sounds like you might be working on, there's a nice simple to use implementation of a function called docReady() here: pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it that you can either use or copy/learn concepts from.