Czy programy obsługi zdarzeń na węźle DOM są usuwane wraz z węzłem?

JQuery dokłada wszelkich starań, aby uniknąć wycieków pamięci podczas usuwania elementów z DOM. Tak długo, jak używasz jQuery do usuwania węzłów DOM, usuwanie programów obsługi zdarzeń i dodatkowych danych powinno być obsługiwane przez jQuery. Gorąco polecam lekturę Johna Resiga sekrety Ninja JavaScript Jak idzie w szczegółach na temat potencjalnych wycieków w różnych przeglądarkach i jak biblioteki JavaScript, takie jak jQuery obejść te problemy. Jeśli nie używasz jQuery, na pewno masz aby martwić się wyciekiem pamięci przez osierocone procedury obsługi zdarzeń podczas usuwania węzłów DOM.

Może być konieczne usunięcie tych procedur obsługi zdarzeń.

Wycieki pamięci Javascript po rozładowaniu strony internetowej

W naszym kodzie, który nie jest oparty na jQuery, ale na jakimś prototypowym dewiancie, mamy inicjalizatory i destruktory w naszych klasach. Stwierdziliśmy, że usuwanie programów obsługi zdarzeń z obiektów DOM jest absolutnie niezbędne, gdy podczas działania niszczymy nie tylko naszą aplikację, ale także poszczególne widżety.

W Przeciwnym Razie skończymy z wyciekami pamięci w IE.

To zaskakująco łatwo uzyskać wycieki pamięci w IE - nawet gdy rozładujemy stronę, musimy być pewni, że aplikacja" zamyka się " czysto, sprzątając wszystko - lub proces IE będzie rosnąć z czasem.

Edit: aby zrobić to poprawnie mamy obserwatora zdarzeń na window dla zdarzenia unload. Kiedy to nastąpi, nasz łańcuch destruktorów zostanie wezwany do prawidłowego oczyszczenia każdego obiektu.

I przykładowy kod:

/**
 * @constructs
 */
initialize: function () {
    // call superclass
    MyCompany.Control.prototype.initialize.apply(this, arguments);

    this.register(MyCompany.Events.ID_CHANGED, this.onIdChanged);
    this.register(MyCompany.Events.FLASHMAPSV_UPDATE, this.onFlashmapSvUpdate);
},

destroy: function () {

    if (this.overMap) {
        this.overMap.destroy();
    }

    this.unregister(MyCompany.Events.ID_CHANGED, this.onIdChanged);
    this.unregister(MyCompany.Events.FLASHMAPSV_UPDATE, this.onFlashmapSvUpdate);

    // call superclass
    MyCompany.Control.prototype.destroy.apply(this, arguments);
},

Niekoniecznie

Dokumentacja metody jQuery empty() odpowiada na moje pytanie i daje mi rozwiązanie problemu. Pisze:

Aby uniknąć wycieków pamięci, jQuery usuwa inne konstrukcje, takie jak dane i obsługa zdarzeń z elementów potomnych przed usunięciem elementów siebie.

Więc: 1) jeśli nie zrobilibyśmy tego wprost, dostalibyśmy wycieki pamięci, a 2) używając empty(), mogę tego uniknąć.

Dlatego powinienem zrobić to:

formSection.empty();
formSection.html(newContents);

Chciałem poznać siebie, więc po małym teście, myślę, że odpowiedź brzmi tak.

RemoveEvent jest wywoływany, gdy ty .Usuń () coś z DOM.

Jeśli chcesz zobaczyć go samodzielnie, możesz spróbować tego i postępować zgodnie z kodem, ustawiając punkt przerwania. (Używałem jquery 1.8.1)

Dodaj najpierw nowy div:
$('body').append('<div id="test"></div>')

Sprawdź $.cache, aby upewnić się, że nie ma żadnych zdarzeń związanych z nim. (powinien to być ostatni obiekt)

Dołącz Zdarzenie kliknięcia do Informatyka:
$('#test').on('click',function(e) {console.log("clicked")});

Przetestuj i zobacz nowy obiekt w $.cache:
$('#test').click()

Usuń go, a zobaczysz, że obiekt $.cache również zniknął:
$('#test').remove()