Discussion :

[adiGuba]

Salut,



Je n'ai pas vraiment trouvé d'info : je voudrais savoir les bonnes pratiques vis à vis des listeners.
En particulier : doit-on supprimer les listeners d'un élément du DOM lorsqu'on supprime cet élément du DOM de la page ?


Explication : je dispose d'une application web en AJAX dans laquelle on passe de vue en vue sans recharger la page.
Chacune de ces vues correspond à un element DOM créé dynamiquement, et comportant plusieurs éléments avec divers listeners ajoutés via addEventListener().

A chaque changement de vue, on regénère donc une nouvelle vue que l'on place dans la page, en remplacement de la vue précédente.


Mais je ne supprime pas les listeners via removeEventListener().
Est-ce correct ? Sachant que je n'ai plus de référence vers ces éléments, et qu'ils ne sont plus présent dans le DOM.

Est-ce que je devrais conserver tout cela pour les supprimer lorsque je supprime la vue de la page ?





a++

[SylvainPV]

Tout dépend de la façon dont le listener est attaché, s'il s'agit d'évènements délégués ou non. Prenons un exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
//évènement rattaché
document.body.querySelector("button").addEventListener("click", function(){ alert('clic'); }); 
 
//évènement délégué
document.body.addEventListener("click", function(event){
  if(event.target.tagName == "button"){
      alert('clic');
  }
});

Avec un évènement rattaché, le listener est lié à l'élément. Donc si l'élément est supprimé, le listener aussi, tout est clean.
Au contraire, avec un évènement délégué on demande à un élément parent (généralement le document ou window) d'intercepter tous les évènements d'un certain type, puis de vérifier d'où provient l'évènement et s'il correspond au sélecteur désiré. L'avantage, c'est qu'on peut ajouter et retirer dynamiquement des éléments dans la page sans avoir à se soucier de si les listeners ont été ajoutés ou pas. L'inconvénient, c'est que si l'on souhaite retirer ses listeners, il faut le faire manuellement avec removeEventListener (ou supprimer l'élément parent mais quand il s'agit de window, c'est plutôt ennuyeux )

[Bovino]

Il y a d'autres éléments à prendre en considération.
Si l'élément auquel tu attaches l'événement correspond à une variable :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
var elem = document.createElement('div');
elem.addEventListener('click', function(){
    alert('cliqué');
});

supprimer l'élément du DOM ne supprimera pas le listener.
D'autre part, tu ne peux pas supprimer un listener avec removeEventListener si le callback est une fonction anonyme :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
var elem = document.createElement('div');
elem.addEventListener('click', function(){
alert('cliqué');
});
elem.removeEventListener('click', function(){
alert('cliqué');
});
elem.click();

[adiGuba]

@SylvainPV : Je parle bien d'évènement attaché directement sur un élément et non pas délégué sur un parent.


@Bovino : Les évènements sont attaché à une variable (un peu comme dans ton code).
Mais cette variable n'est plus accessible dans le code et elle est supprimé du DOM.

Dans ce cas le listener est toujours en mémoire et je devrais le supprimer ?



Je vais essayer de faire un code minimal pour me faire comprendre.
(je peux pas donner mon code car ce n'est pas réellement du JavaScript. Il est généré).


a++

[adiGuba]

Voilà grosso-modo un exemple de code : http://jsfiddle.net/AG292/


La page contient 3 boutons et un container de base.
Lorsqu'on clique sur un des boutons, le contenu précédent est supprimé du container (avec removeChild()), et on y insère un nouvel élément avec un évènement associé.

Cet évènement doit-il être supprimé lorsque je change de vue via un bouton ?
Le fait de supprimer l'élément du DOM et ne plus avoir de variable le référençant n'est-il pas suffisant ?


a++

[NoSmoking]

Bonjour,
en fin de ta fonction il te suffit de "déréférencer" l'élément, elem = null;