gestion des evenements

bonjour,

n'étant pas un professionnel de la chose, je m'interesse à la gestion des evenements Javascript.
jusque là, j'utilisais en masse les attributs onclick, onmouseover, on... dans les balises HTML.

J'essaie de me mettre un peu à jour (10 apres le W3C ... :aie:) en gérant tout cela dans des fichiers JS séparés.

Je n'ai pas trouvé beaucoup de Doc sur DVP.
Quirksmode en parle pas mal mais je n'ai pas trouvé quelle était LA fonction à utiliser, cross-browser et tout ce qu'il faut pour pas s'embeter.

J'ai ben trouvé ca :

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( obj, type, fn ) { if (obj.addEventListener) obj.addEventListener( type, fn, false ); else if (obj.attachEvent) { obj["e"+type+fn] = fn; obj[type+fn] = function() { obj["e"+type+fn]( window.event ); } obj.attachEvent( "on"+type, obj[type+fn] ); } }   function removeEvent( obj, type, fn ) { if (obj.removeEventListener) obj.removeEventListener( type, fn, false ); else if (obj.detachEvent) { obj.detachEvent( "on"+type, obj[type+fn] ); obj[type+fn] = null; obj["e"+type+fn] = null; } }

---

je voulais votre avis.
Qu'est ce que vous utilisez ?

Question subsidiaire : est-il possible de passer des parametres à une fonction qui doit être lancée sur un evenement ?

merci

Bonsoir.

Tutoriel : http://www.howtocreate.co.uk/tutoria...ript/domevents

merci pour ce lien tres complet.

j'ai egalement lu la discussion sur les bonnes pratiques javascript.

j'en conclue tout seul :

- capture, bubbling : c'est tres joli mais faut une interface assez lourde pour avoir besoin de gérer ca non ? pour faire des 'trucs basiques' et meme un peu plus , ca sert pas à grand chose ...?

- est-ce que le combat entre

Code:

---

element.addEventListener(type, mafunction, false)

---

et

Code:

---

element.onevent = mafonction;

---

fait toujours rage ?

- bien sur à la place de element.addEventListener tout seul, ca serait plutot

Code:

---

1 2 3 4 5 6 7 8 9 10

function addHandler(element, type, callback){ if (element.attachEvent){ element.attachEvent("on" + type, callback); } else{ element.addEventListener(type, callback, false); } }   addHandler(element, "click", maFonction);

---

j'en reviens alors à mon premier post, quelle fonction utilisez vous ?

- et à ma question 'est-il possible de passer des parametres à une fonction qui doit être lancée sur un evenement ?', faut-il simplement opter pour un

Code:

---

element.onevent = function(){mafonction(param1, param2, param3)};

---

??

mais alors comment je fais pour utiliser plusieurs parametres en utilisant la syntaxe

Code:

---

addHandler(element, "click", maFonction);

---

??


- je passe sur le fait que 'element.onevent = function' empeche d'ajouter plusieurs actions sur un evenement, ce qui ne me semble pas primordial, toujours pour des interfaces 'simples'

merci de vos avis

Citation:

---

Envoyé par sebhm

merci pour ce lien tres complet.

j'ai egalement lu la discussion sur les bonnes pratiques javascript.

j'en conclue tout seul :

- capture, bubbling : c'est tres joli mais faut une interface assez lourde pour avoir besoin de gérer ca non ? pour faire des 'trucs basiques' et meme un peu plus , ca sert pas à grand chose ...?

- est-ce que le combat entre

Code:

---

element.addEventListener(type, mafunction, false)

---

et

Code:

---

element.onevent = mafonction;

---

fait toujours rage ?

- bien sur à la place de element.addEventListener tout seul, ca serait plutot

Code:

---

1 2 3 4 5 6 7 8 9 10

function addHandler(element, type, callback){ if (element.attachEvent){ element.attachEvent("on" + type, callback); } else{ element.addEventListener(type, callback, false); } }   addHandler(element, "click", maFonction);

---

j'en reviens alors à mon premier post, quelle fonction utilisez vous ?

- et à ma question 'est-il possible de passer des parametres à une fonction qui doit être lancée sur un evenement ?', faut-il simplement opter pour un

Code:

---

element.onevent = function(){mafonction(param1, param2, param3)};

---

??

mais alors comment je fais pour utiliser plusieurs parametres en utilisant la syntaxe

Code:

---

addHandler(element, "click", maFonction);

---

??


- je passe sur le fait que 'element.onevent = function' empeche d'ajouter plusieurs actions sur un evenement, ce qui ne me semble pas primordial, toujours pour des interfaces 'simples'

merci de vos avis

---

Bonjour :)

de Mon point de vue , il vaut muieux faire en premier du spécifique et si au besoins , arranger pour faire du généraliste , donc un onclick = function suffit dans bien des cas :)

maintenant tu peux feinter :

Code:

---

1 2 3 4 5

function launchEvent(){ for(var i = 0; i < mesFonction.length ; i++){ mesFonction[i](); } }

---

ou mesFonction , serait un tableau de fonctions ...

J'utilises un singleton comme interface pour attacher et détacher les évènements.
Il s'occupe de la gestion DOM ou objet javascript.
Un peu comme le propose le_chomeur, je dois introduire un composite pour que les méthodes objets JS correspondent mieux à celles "des" DOM.

Je "re-décore" aussi l'objet event, pour proposer une interface commune d'accès (getTarget(), getType(), etc..., stop()). C'est ce nouveau "event" que je passe aux méthodes finales qui géreront l'évènement.
C'est rendu possible car, le singleton affecte une de ses méthodes sur le déclenchement des évènements pour notifier ses observers.
Autre différence, les observers sont des objets et implémente une méthode particulière pour pouvoir être notifiés par le singleton.
Donc, pas de fonction anonyme, mais au besoin, des objets anonymes ^^)

Sinon, certains frameworks utilisent ce genre de chose. Celui de JQuery m'a l'air pas mal, et je le trouve assez dans l'esprit de ce que je cherche.

Salut kernelfailure,

oui on peut utiliser un gestionnaire d'évènement de type singleton, mais selon l'application utiliser , bien souvent on gagne du temps en affectant directement la méthode utilisée sur l'évènement ;)

de plus pour les fonctions anonyme, je n'ai pas trouvé ( a ma connaissance) de gestionnaire d'évènement permettant de les détacher , en les gérant de manière objet et non fonction Ok mais ça implique une gestion supplémentaire , et quid de leur identification ?

exemple avec une méthode anonyme dans une boucle avec un paramère ( genre

Code:

---

for(var i ...){monevent= function(){}(i)}

---

)

^^

attention à ne pas monter une usine à gaz pour gérer un onclick !

et on revient au probleme des scripts qui alourdissent les pages alors qu'ils sont sous-utilisés dans la grande majorité des cas

C'est ce que je dis ^^

un onclick+event suffit si l'on est pas dans une application particulière

jour

pour mettre des parametres pour ie j'utilise cette syntaxe

Code:

---

document.getElementById("element").attachEvent ('onmousedown', function(){return lafonction("leparametre");});

---

et pour ff chrome safa opera avec setAtribute

Code:

---

document.getElementById"element").setAttribute("onmousedown",lafonction("leparametre")");

---

J'ai eu ce besoin pour une appli qui au plus bas utilise 48 events. Au max, elle doit être pas loin du double.

J'ai préféré mutualiser cette forme de gestion plutôt que de devoir tout me palucher à chaque fois. D'où la conception sous singleton. (Rien que d'en parler, ça me fait penser que je peux pousser la chose encore...).
L'autre intérêt, c'est que du même coup, je n'utilise plus qu'une seule interface pour accéder à l'objet event, quelque soit le navigateur. Ca a énormément clarifié mon code.

/* */
Pour ce qui est de supprimer un event sur fonction anonyme, je me souviens que tu avais déjà soulevé la question.
Dans un cas comme celui que tu présentes, si je comprends bien le problème, plutôt que de passer par une variable 'monevent', j'enquillerais les functions dans un tableau. Ensuite, parcours du tableau etc...

Style :

Code:

---

1 2 3

var tab = [], i=0; setTimeout(tab[i] = function () { alert('ok') }, 100); document.write(tab[i]);

---

Mais, s'il est question de cibler avec précision UNE fonction, il faudra de toutes manières qu'elle ne soit plus anonyme, quitte à lui affecter un id au vol. Id qu'il faudra bien sur retrouver ou conserver.

/* */
L'affectation direct (C'est à dire, par l'objet, si on parle de la même chose ex : objDiv.onmouseover = ...) a un gros problème, de mon point de vue : Elle ne permet pas de superposer les évènements.
C'est un problème pour les applis qui montent de nouveaux contrôleurs sur une page.
C'est pour cette raison aussi que j'ai dédié un objet à ça.