[DOM] Gestion des événements avant l'existence d'un élément

Bonjour :)

Je suis souvent confronté à un soucis que je zappe par des manières détournées. Mais aujourd'hui j'ai décidé de m'y intéresser et d'approfondir le sujet. Je commence par poser ma question ici :

comment poser une gestionnaire d'évènement sur un élément avant son existence?

J'avais envisagé qu'a l'instar d'une fonction telle body=onload(genre body=mutation), on pouvait surveiller le DOM et qu'a chaque mutation on rendrait le gestionnaire d'évènements actif sur un élément qui n'existait pas au load de la page...

Il existe bien des infos : http://www.w3.org/TR/DOM-Level-2-Eve...mutationevents, mais j'avoue avoir du mal à comprendre, ne maitrisant pas assez la gestion des Events

Si j'ai des réponses montrant l'intérêt de ce sujet. J'approfondis avec un exemple.

Merci de vos avis

Fab :)

Citation:

---

comment poser une gestionnaire d'évènement sur un élément avant son existence?

---

C'est pas possible.

Je dirai même que c'est impossible.

Aujourd'hui je repasse derrière tous les messages de Bovino :love:

tu peux appeler à intervalle régulier avec setInterval() une fonction récursive qui scrute le DOM et ajoute des gestionnaires ou autre aux nouveaux éléments.

genre

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

function addEvent(element, tag, type, callback){ if (element.nodeName==tag && !element.wasInitialized){ if (element.attachEvent){ element.attachEvent("on"+type, callback); } else if (element.addEventListener){ element.addEventListener(type, callback, false); } else{ element["on"+type] = callback; }   element.wasInitialized = true; }   if (element.hasChildNodes()){ var next = element.firstChild; while (next){ addEvent(next, tag, type, callback); next = next.nextSibling; } } }

---

C'est très approfondi comme réponse :lol:

Moi qui cherchais justement... à approfondir.

La dernière réponse est mieux

Sur la dernière justement, comme je disais plus haut, rien n'existe qui s'exécute à la modification du DOM?, je sais pas si vous avez lu mon lien sur "Mutation event types"

connais pas. mais c'est du DOM niveau 2, ya de fortes chances que ça ne soit pas compatible avec tous les navigateurs (j'ai l'impression que IE ne le supporte pas)

Je ferais part de mes recherches :)

pourquoi ne pas faire une fonction perso d'ajout d'objet DOM qui inclue l'ajout des evenements?

Comme par exemple, on crée un élément qu'on injecte dans le DOM, et en même temps on lui affecte un évènement? C'est ce qui me gêne en réalité :)

Un exemple très rapide, au load de la page on boucle sur les éléments possédant une class "untel", et on leur affecte un gestionnaire d'évènements au click. Si j'ajoute à un moment un élément avec une classe "untel" dans le DOM, je devrais réaffecter mon gestionnaire à ce nouvel élément. Je trouve ça très lourd. C'est le pourquoi de ma question initial.

Merci de vos avis en tout cas :)

non tu peux tout simpelement faire une fonction générique qui attribue calss et evenements en même temps ...


jette un oeil sur ce post:
http://www.developpez.net/forums/d53...ynamique-form/

je ne vois pas en quoi c'est lourd, mais bon soit...
pourquoi ne pas gérer les événements au niveau d'un conteneur principal? il décidera de l'action à mener en fonction de qui l'aura déclenché

Je dis que c'est lourd car je suis sur un projet ou je dois être pas loin des 3000/4000 lignes de js, donc si jeux factoriser au maximum, ça m'arrange.

Merci pour le lien, c'est intéressant.

Citation:

---

Je dis que c'est lourd car je suis sur un projet ou je dois être pas loin des 3000/4000 lignes de js, donc si jeux factoriser au maximum, ça m'arrange.

---

Bonjour,


Dans tous les cas c'est ce qu'il faudrait faire,
lorsque tu veux ajouter un évenement à tous les éléments qui ont tel classe. Tu parcours tous ces éléments et tu leur associe chacun l'évenement en question.

Donc lorsque tu rajoutes un élément dans le DOM, par définition, à cet élément il n'y a aucune raison d'associer nativement un évenement (en dépit de sa classe).

Si tu regardes des outils comme lightbox, lorsque tu rajoutes dynamiquement un lien celui-ci n'est pas pris en compte par lightbox.

Quoi de plus normal, une solution plausible comme celle expliquée plus haut serait d'effectuer un appel récusif d'une fonction chargée d'associer un évenement aux éléments possédant tel ou tel classe. Bonjour les performances :p

Citation:

---

Envoyé par ThomasR

...

Donc lorsque tu rajoutes un élément dans le DOM, par définition, à cet élément il n'y a aucune raison d'associer nativement un évenement (en dépit de sa classe)....

---

Prenons un autre exemple(on va étoffer un peu) :

1. Un form de recherche
2. Un listing de resultat

le listing de resultat et rempli via une requete xhr

Je crée un objet js avec propriété et méthode diverses(que j'instancie au load de la page), une des méthodes de cet objet me permet de gérer le clic sur un élément du listing de résultat.

ça ne fonctionnera pas, logique puisque les résultats n'existant pas encore au load de la page, ils ne peuvent avoir d'évènements associés.

Alors évidement, il existe différentes solutions à ce cas de figure.
Mais cela impose de ne plus se servir uniquement de l'objet crée et d'ajouter du js à tour de bras.

Moi je cherche le meilleur moyen pour que mon objet s'occupe de tout. Sans ajout de bout de js.

:aie: je calcule pas. mais (hypothèse) peut-être as-tu un ch'ti soucis de conception ?

J'ai bien compris ton exemple, mais ca ne change strictement rien à ce que je dis. Nativement un objet, en dépit de sa classe, n'a pas à être associé à un évenement. C'est une entité qui est associé à un évenement et non un groupe d'entités. Je veux dire par là que le DOM n'en a pas prévu l'intérêt de facon natif.

Citation:

---

Moi je cherche le meilleur moyen pour que mon objet s'occupe de tout. Sans ajout de bout de js

---

Je ne crois pas que ce soit possible de facon fully-compatible, comme tu l'as compris le délire serait d'ajouter ton élément au DOM puis d'associer un évenement à ce dernier.

Si tu veux vraiment te lancer dans cette solution, tu peux "catcher" l'évenement DOMNodeInserted.

Pour en savoir plus regarde auprès des Mutation Events :

http://www.w3.org/TR/DOM-Level-2-Events/events.html

Je crois que des exemples valent mieux que de grand discours.

Je me suis servi de mootools pour simplifier le code.

http://www.evernet-studio.com/test/

edit : pour mutation event c'est ce que je mettais en avant au début de ce post