Mécanisme de liaison d'événements dans les navigateurs

Question

Je souhaite comprendre comment fonctionne la liaison/dissociation d'événement dans les navigateurs. Plus précisément, si je supprime un élément auquel un événement est déjà lié, en utilisant par exemple jQuery: $("#anElement").remove();, l'événement lié sera-t-il également supprimé? En d'autres termes, si je ne commence pas par l'événement unbind(), est-ce que je crée une sorte de fuite de mémoire? Editer: Je sais qu'un gestionnaire ne sera pas déclenché à nouveau si un élément est supprimé puis ajouté, mais qu'arrive-t-il au gestionnaire? Est-ce qu'il est toujours dans le navigateur/DOM?

Answer 1

Lorsque vous appelez .remove() (ou .empty()) les gestionnaires d'événements sont supprimés, vous n'êtes pas une fuite de mémoire (au moins pas de cela, ou il y a un autre bug dans le jeu).

est ici ce qui se passe (in current source):

remove: function(selector, keepData) { 
    for (var i = 0, elem; (elem = this[i]) != null; i++) { 
    if (!selector || jQuery.filter(selector, [ elem ]).length) { 
     if (!keepData && elem.nodeType === 1) { 
     jQuery.cleanData(elem.getElementsByTagName("*")); 
     jQuery.cleanData([ elem ]); 
     } 

     if (elem.parentNode) { 
     elem.parentNode.removeChild(elem); 
     } 
    } 
    } 
    return this; 
} 

L'important est ce bit:

jQuery.cleanData(elem.getElementsByTagName("*")); 
jQuery.cleanData([ elem ]); 

Cela va cleanData() sur les éléments de l'enfant et les éléments lui-même, cela supprime les données et les événements il a $.cache, qui nettoie la mémoire qu'ils utilisaient, et appelle interactivement jQuery.event.remove() qui nettoie individuellement les gestionnaires d'événements.

Answer 2

oui, vous ne devez pas unbind. jQuery le fait pour vous.

here's a simple demo.

$(function(){ 
    $('#featured').click(function(){ 
     alert('test'); 
    }); 
    var elem; 
    $('#remove').click(function(){ 
     elem = $('#featured').remove();   
    }); 
    $('#attach').click(function(){ 
     elem.appendTo('body');   
    }); 
});