Discussion :

[sebhm]

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 ... ) 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 :

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

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

[danielhagnoul]

Bonsoir.

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

[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 :

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

element.addEventListener(type, mafunction, false)

et

Code :

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

element.onevent = mafonction;

fait toujours rage ?

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

Code :

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

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 :

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

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

??

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

Code :

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

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

[le_chomeur]

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 :

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

element.addEventListener(type, mafunction, false)

et

Code :

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

element.onevent = mafonction;

fait toujours rage ?

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

Code :

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

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 :

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

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

??

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

Code :

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

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 :

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

1
2
3
4
5
function launchEvent(){
for(var i = 0; i < mesFonction.length ; i++){
mesFonction[i]();
}
}

ou mesFonction , serait un tableau de fonctions ...

[kernelfailure]

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.

[le_chomeur]

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 :

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

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

)

^^

[sebhm]

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

[le_chomeur]

C'est ce que je dis ^^

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

[Invité]

jour

pour mettre des parametres pour ie j'utilise cette syntaxe

Code :

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

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

et pour ff chrome safa opera avec setAtribute

Code :

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

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

[kernelfailure]

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 :

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

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.