Gestionnaire d'évènements javascript

Version imprimable

Bonjour à tous,

Je démarre en Javascript et comme j'ai lu et relu qu'il faut séparer les différents langages, je me suis mis en tête de créer un détecteur d'évènement (pour éviter les onclick="javascript:maFonction(...) et consorts".

Oui, il existe des bibliothèques mais avant d'en utiliser une, quelle qu'elle soit, j'aime savoir ce qu'elle fait, même basiquement. Et donc je viens solliciter votre aide (conseils, corrections, explications... critiques -constructives ;-) -)...

Mon problème est le suivant, je souhaite gérer en simultané deux évènements "mousedown" et "mousemove". Seulement, une fois que j'ai créé le "listener" pour le "mousemove", il reste actif et je n'arrive pas à la désactiver.

Et la question qui me taraude, à force d'essais infructueux, est de savoir si je ne fais pas une confusion entre le bouillonnement et ses conséquences et la suppression de "listener". Le code suit:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 function main() { var addEvent = listener; addEvent(document, 'mousedown', actif); } function listener(obj,evType,fn) { if(obj.addEventListener) { obj.addEventListener(evType,fn,false); } else if(obj.attachEvent) { obj.attachEvent("on"+evType,fn) ; } } function actif(e){ var el= e.target||event.srcElement; if(!el.tagName)el=el.parentNode; alert('vous avez cliqué sur un élément "'+el.tagName+'" dont l\'id est "'+el.id+'"') var addEvent2 = listener; addEvent2(el, 'mousemove', mover); reset(); } function mover(e){ alert('move'); } function reset() { document.detachEvent('mousemove', mover); document.removeEventListener('mousemove', mover, false); } main();
La syntaxe a des défauts et la fonction "reset()" est affreuse mais elle exprimer mon intention. Si quelqu'un a une solution avec l'explication qui va bien :roll:

Merci par avance.

17/12/2009, 17h12
kernelfailure
Déjà, c'est clair que tu vas avoir de bonnes sués à cliquer comme un forcené sur tes alertes (remplace mousemove par mouseup)

Est-ce que tu es sur d'attacher ton 'mousemove' sur document ?
Car c'est sur document que tu fais le détachement.

Tu as pris soin de vérifier la présence des attachEvent, fais de même avec les detachEvent.

Petite remarque. Tu n'es pas obligé de faire ça :
Code:

1 2 var addEvent = listener; addEvent(document, 'mousedown', actif);
Ceci suffit :

Code:

listener(document, 'mousedown', actif);

Ici, je suis surpris du mélange (e ou event ?) :
Code:

1 2 var el= e.target||event.srcElement; if(!el.tagName)el=el.parentNode;
Je ne procède pas comme ça, je fais plutôt :

Code:

if (!e) e=window.event;

Puis je travailles avec e.
Mais bon, c'est peut-être une manière d'optimiser la chose. C'est qu'en fait, aussi, je ne sais pas quel nav met ou pas event :mouarf:

:'( fonctionne pas...

Merci pour les infos, mais... ça ne fonctionne pas... Je suppose que je n'ai pas compris les modifs à faire... J'ai l'impression d'être en train de m'emmêler les pinceaux...

Est-ce que je place mal les fonctions ou est-ce qu'il me manque des éléments? Il me semblait, d'après les explications trouvées ça et là, que pour supprimer l'évènement sur le "mousemove" il est nécessaire de détacher l'écouteur qui lui est lié, autrement dit, si j'ai un addEventlistener sur un mousemove, je dois faire un removeEventListener sur ce même mousemove (ou plus exactement sur le noeud/élément auquel est lié l'action mousemove)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 function main() { var addEvent = listener; addEvent(document, 'mousedown', actif); } function listener(obj,evType,fn) { if(obj.addEventListener) { obj.addEventListener(evType,fn,false); } else if(obj.attachEvent) { obj.attachEvent("on"+evType,fn) ; } } function actif(e){ var el= e.target||event.srcElement; if(!el.tagName) { el=el.parentNode; } alert('vous avez cliqué sur un élément "'+el.tagName+'" dont l\'id est "'+el.id+'"') var addEvent2 = listener; addEvent2(document, 'mousemove', mover); var removeEvent = remover; removeEvent(document, 'mousemove', reset); } function mover(e){ alert('move'); } function remover(obj,evType,fn) { if(obj.detachEvent) { obj.detachEvent("on"+evType,fn); } else if(obj.removeEventListener) { obj.removeEventListener(evType,fn,false); } } function reset() { alert('suppression'); } main();
La question qui me vient, mais le test tenté ne fonctionnait pas (avant même de poster un message hier, j'avais tenté cette approche): faut-il créer un addEvent lié au mouseup (qui va appeler une fonction de suppression de l'écouteur lié au mousemouve)?
Seulement... ça me semble capilotracté de créer un évènement pour supprimer un évènement...à moins qu'il ne s'agisse alors de supprimer, à la fois l'écouteur pour le mouseup et le mousemove? Mais où les placer? Que ce soit dans action ou dans main, ça ne fonctionne jamais: soit plus rien ne fonctionne, soit le mousemove reste actif...

Ça va me rendre chèvre... Help!...

Déjà, le principal problème, c'est que le remove doit être fait avec la même fonction que le add.

Forcément, ton 'reset' n'a pas de pendant, puisque c'est 'mover' que tu vise ;)
Aussi, tu lui coupe la chique un peu tôt.

Jette un oeil là-dessus :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<html>
<head></head>
<script>
	function addEvent(obj,evType,fn) {
		if (obj.addEventListener) {
		 	obj.addEventListener(evType,fn,false);
		} else if (obj.attachEvent) {
			obj.attachEvent("on"+evType,fn) ;
		} else {
			obj["on"+evType] = fn;
		}
	}
 
	function subEvent(obj,evType,fn) {
		if (obj.detachEvent) {
			obj.detachEvent("on"+evType,fn);
		} else if (obj.removeEventListener) {
			obj.removeEventListener(evType,fn,false);
		} else {
			obj["on"+evType] = null;
		}
	}
 
 
	function actif(e) {
		if(!e) e=window.event
		var el = e.target || e.srcElement;
		if(!el.tagName) el=el.parentNode;
		alert('vous avez cliqué sur un élément "'+el.tagName+'" dont l\'id est "'+el.id+'"')
 
		addEvent(el, 'mouseup', mover);
	}
 
	function mover(e) {
		if(!e) e=window.event
		var el = e.target || e.srcElement;
		alert('move');
		subEvent(el, 'mouseup', mover);
	}
 
	/** **/
	function main(elm) {
		addEvent(elm, 'mousedown', actif);
	}
 
</script>
<body onload="main(document.getElementById('cazamouse'));">
<div id="cazamouse" style="position:absolute;top:100;left:100;width:100px;height:100px;border:1px solid black;background-color:blue">
</div>
</body>
</html>

J'ai préféré ne pas employer 'document' pour que tu puisses mieux apprécier le 'mouseup' qui n'est intercepter que dans le carré.

18/12/2009, 14h02
le_chomeur

Question : comment supprimer une fonction anonyme ????

Citation:

Envoyé par le_chomeur

Question : comment supprimer une fonction anonyme ????

Dans la fonction, avec arguments.callee

Code:

1
2
3
4
5
6
		addEvent(el, 'mouseup', function (e) {
						if(!e) e=window.event
						var el = e.target || e.srcElement;
						alert('move');
						subEvent(el, 'mouseup', arguments.callee);
						});

Ou ceci :

Code:

1
2
3
4
5
6
		addEvent(el, 'mouseup', function mover (e) {
						if(!e) e=window.event
						var el = e.target || e.srcElement;
						alert('move');
						subEvent(el, 'mouseup', mover);
						});

18/12/2009, 14h57
xephres

Ça marche!

Merci ^ ^

Je crois commencer à comprendre, pour la suite, comme on dit, c'est en forgeant que l'on devient forgeron :-) Donc à moi d'œuvrer pour donner forme à mon idée :-)