I'm using this code for firefox extension

1: var Test {
2:  f: function() {
3:    alert("DOM content loaded");
4:    window.removeEventListener("DOMContentLoaded", function(e) { Test.f(); }, false);
5:  }
6: }
7: window.addEventListener("DOMContentLoaded", function(e) { Test.f(); }, false);

It should execute the code in function f() when DOM content (weg page) was loaded, it means it should give me one alert if I open new page or new tab or reload a page. The problem is, it gives me about 20 alerts, instead of one.
The problem is even worse if I want in function f() append to every anchor some text (e.g. if I want to append the text "()" it will append "()()()()()"

Do you know how to achieve the behaviour I want? removeEventListener didn't help.

The culprit seems to be other firefox extensions and about:blank. Is it possible that my event listener on DOMContentLoaded ignores page loads causes by other extensions?

thank you

I'm using this code for firefox extension

1: var Test {
2:  f: function() {
3:    alert("DOM content loaded");
4:    window.removeEventListener("DOMContentLoaded", function(e) { Test.f(); }, false);
5:  }
6: }
7: window.addEventListener("DOMContentLoaded", function(e) { Test.f(); }, false);

It should execute the code in function f() when DOM content (weg page) was loaded, it means it should give me one alert if I open new page or new tab or reload a page. The problem is, it gives me about 20 alerts, instead of one.
The problem is even worse if I want in function f() append to every anchor some text (e.g. if I want to append the text "()" it will append "()()()()()"

Do you know how to achieve the behaviour I want? removeEventListener didn't help.

The culprit seems to be other firefox extensions and about:blank. Is it possible that my event listener on DOMContentLoaded ignores page loads causes by other extensions?

thank you

• javascript
• events
• firefox-addon
• addeventlistener

• In addition to the discussion going on in Wladimir's answer, which is great, you may want to avoid using alert for things like this, because it blocks until the user clicks OK. Maybe use window.dump instead. – Tyler Commented Jun 7, 2011 at 17:37
• @MatrixFrog I disabled the addons that were causing those problems and upgraded to firefox 4. I'm thinking about accepting his answer but I'm still a little interested if it's possible to listen only to DOMContentLoaded event caused by browser (not by other addons). Thank you for tip. I was looking for some better alternative than alert. Where can I see the output of window.dump? – xralf Commented Jun 7, 2011 at 19:24
• In general, other addons shouldn't be firing DOMContentLoaded events, but frames/iframes inside of pages will be. You need to enable a config setting to use window.dump. See developer.mozilla/en/DOM/window.dump – Tyler Commented Jun 7, 2011 at 20:22
• They shouldn't but the links that were loaded "in the background" were in the database of one addon (alertbox - periodically checking for changes). They were in e.target.URL. Similarly some chrome:// windows and about:blank – xralf Commented Jun 7, 2011 at 20:33
• I don't think this is directly related to your issue, but I do just want to point out that the removeEventListener call doesn't actually remove the event like you think it does. In both cases, you're passing in an anonymous function, but they aren't the same anonymous function. JavaScript creates a new one each time they're defined. In order to remove the event listener for real, you need to save a reference to the function in a variable, and pass that variable into both the add and remove calls. – mAAdhaTTah Commented Feb 13, 2016 at 18:25

2 Answers 2

DOMContentLoaded generally only fires once per document so I suspect that you are catching events from the page's frames as well. Impossible to tell for sure with the information provided.

I can tell why you fail to remove the listener however. function(e) { Test.f(); } is a closure, each time this code runs a new function is created. So the function you add as a listener is different from the function you remove. Try the following for example:

alert(function(e) { Test.f(); } == function(e) { Test.f(); });

To avoid this problem you need to actually remember your closure, e.g.:

var listener = function(e)
{
    window.removeEventListener("DOMContentLoaded", listener, false);
    Test.f();
}
window.addEventListener("DOMContentLoaded", listener, false);

You need to test whether or not DOMContentLoaded is being triggered by a frame load or the main document load, and only execute your function in the latter case:

    var Test {
        f: function() {
            if (!event.originalTarget.defaultView.frameElement) {
                alert("DOM content loaded");
            }
        }
    }

    window.addEventListener("DOMContentLoaded", function(e) { Test.f(); }, false);