Supprimer un evenement

Version imprimable

27/07/2010, 16h48
ne2sbeal

Supprimer un evenement
Bonjour,

J'ai un problème en javascript au sujet des évenements. J'assigne des evènements à des objets grâce à cette méthode :
Code:

1 2 3 4 5 6 function addEvent(obj,event,fct){ if(obj.attachEvent) obj.attachEvent('on' + event,fct); else obj.addEventListener(event,fct,true); }
Dans mon cas je crée un évenement comme ceci :

Code:

addEvent(onglet,"mouseout",function (){onglet.style.backgroundImage='url(../../images/bouton_on.png)'; onglet.style.cursor='normal';});

Maintenant à un moment je ne veux plus cet évènement mais le supprimer. J'ai essayé plusieurs solution mais ça na pas marché.

Merci d'avance pour votre aide.
27/07/2010, 16h49
SpaceFrog

Code:

addEvent(onglet,"mouseout",function (){void(0);});

Habituellement, ce type de fonction est accompagné d'une autre :

Code:

1
2
3
4
5
6
7
8
function removeEvent(obj,event,fct){
    if (obj.detachEvent) {
        obj.detachEvent("on" + event, fct);
    }
    else {
        obj.removeEventListener(event, fct, true);
    }
}

27/07/2010, 17h02
SpaceFrog
arf add .... :oops:
= ajout

donc :
Code:

1 2 3 4 function removeEvent(obj,event){ obj.event=function(){void(0);}; }
reste à savoir si tu cherche à supprimer juste une fonction ou carrément l'évènement entier.

La solution de Beef est plus selective ^^

Par contre, l'utilisation de fonction anonyme avec addEvent/removeEvent empêche de supprimer la fonction associée, il est nécessaire de nommer les fonctions pour pouvoir ensuite les supprimer.

ex:
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 function addEvent(obj,event,fct){ if(obj.attachEvent) obj.attachEvent('on' + event,fct); else obj.addEventListener(event,fct,true); } function removeEvent(obj,event,fct){ if (obj.detachEvent) { obj.detachEvent("on" + event, fct); } else { obj.removeEventListener(event, fct, true); } } function toto() { alert("toto"); } /* Pour ajouter la fonction à l'événement */ addEvent(onglet,"mouseout",toto); /* Pour supprimer la fonction à l'événement */ removeEvent(onglet,"mouseout",toto);
@SpaceFrog

Citation:

function removeEvent(obj,event){
obj.event=function(){void(0);};
}

Comment ça marche ? :?

Citation:

Envoyé par BaBeuH

Par contre, l'utilisation de fonction anonyme avec addEvent/removeEvent empêche de supprimer la fonction associée

Non :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function addEvent(obj,event,fct){
     if(obj.attachEvent)
        obj.attachEvent('on' + event,fct);
     else
        obj.addEventListener(event,fct,true);
}
 
function removeEvent(obj,event,fct){
    if (obj.detachEvent) {
        obj.detachEvent("on" + event, fct);
    }
    else {
        obj.removeEventListener(event, fct, true);
    }
}
 
/* Pour ajouter la fonction à l'événement */
addEvent(onglet,"mouseout",function(){alert('toto');});
 
/* Pour supprimer la fonction à l'événement */
removeEvent(onglet,"mouseout",function(){alert('toto');});

Fonctionne aussi, le seul impératif est que ce 3e paramètre soit identique dans le add et dans le remove ;)

Citation:

Envoyé par Bovino

Non :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function addEvent(obj,event,fct){
     if(obj.attachEvent)
        obj.attachEvent('on' + event,fct);
     else
        obj.addEventListener(event,fct,true);
}
 
function removeEvent(obj,event,fct){
    if (obj.detachEvent) {
        obj.detachEvent("on" + event, fct);
    }
    else {
        obj.removeEventListener(event, fct, true);
    }
}
 
/* Pour ajouter la fonction à l'événement */
addEvent(onglet,"mouseout",function(){alert('toto');});
 
/* Pour supprimer la fonction à l'événement */
removeEvent(onglet,"mouseout",function(){alert('toto');});

Fonctionne aussi, le seul impératif est que ce 3e paramètre soit identique dans le add et dans le remove ;)

Malheureusement ça ne fonctionne pas, ça créé l'evenement mais ne le supprime pas.

Citation:
Envoyé par BaBeuH
Par contre, l'utilisation de fonction anonyme avec addEvent/removeEvent empêche de supprimer la fonction associée, il est nécessaire de nommer les fonctions pour pouvoir ensuite les supprimer.

ex:
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 function addEvent(obj,event,fct){ if(obj.attachEvent) obj.attachEvent('on' + event,fct); else obj.addEventListener(event,fct,true); } function removeEvent(obj,event,fct){ if (obj.detachEvent) { obj.detachEvent("on" + event, fct); } else { obj.removeEventListener(event, fct, true); } } function toto() { alert("toto"); } /* Pour ajouter la fonction à l'événement */ addEvent(onglet,"mouseout",toto); /* Pour supprimer la fonction à l'événement */ removeEvent(onglet,"mouseout",toto);
@SpaceFrog

Comment ça marche ? :?
Je ne sais pas pourquoi mais l'evenement ne se créé pas

edit : si mais par contre si on veux créé une fonction de type :
Code:

1 2 3 4 5 function toto(test) { alert(test); }
Comment on crée l'evenement? car addEvent(onglet,"mouseout",toto(1)); ne marche pas

27/07/2010, 17h52
Bovino

Code:

addEvent(onglet,"mouseout",function(){alert('toto');});

Tu as mis quoi à la place de "onglet" :roll:
27/07/2010, 17h53
ne2sbeal

onglet c'est mon objet. Mais la création de l'evenement ça marche, c'est la suppression qui ne fonctionne pas.

Citation:

Envoyé par Bovino

Non :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function addEvent(obj,event,fct){
     if(obj.attachEvent)
        obj.attachEvent('on' + event,fct);
     else
        obj.addEventListener(event,fct,true);
}
 
function removeEvent(obj,event,fct){
    if (obj.detachEvent) {
        obj.detachEvent("on" + event, fct);
    }
    else {
        obj.removeEventListener(event, fct, true);
    }
}
 
/* Pour ajouter la fonction à l'événement */
addEvent(onglet,"mouseout",function(){alert('toto');});
 
/* Pour supprimer la fonction à l'événement */
removeEvent(onglet,"mouseout",function(){alert('toto');});

Fonctionne aussi, le seul impératif est que ce 3e paramètre soit identique dans le add et dans le remove ;)

tu es sûr ? J'ai fait un test justement avant de poster et ça ne marchait pas de supprimer via la même fonction anonyme...

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>
		<script type="text/javascript">
			function addEvent(obj,event,fct){
			     if(obj.attachEvent)
			        obj.attachEvent('on' + event,fct);
			     else
			        obj.addEventListener(event,fct,true);
			}
 
			function removeEvent(obj,event,fct){
			    if (obj.detachEvent) {
			        obj.detachEvent("on" + event, fct);
			    }
			    else {
			        obj.removeEventListener(event, fct, true);
			    }
			}
 
			function toto(){ alert("toto");}
 
			addEvent(window,"load",function(){
 
				addEvent(document.getElementById("enableClick"),"click",function(){
					addEvent(document.getElementById("divTest"),"click",toto);
				});
 
				addEvent(document.getElementById("disableClick"),"click",function(){
					removeEvent(document.getElementById("divTest"),"click",toto);
				});
 
				addEvent(document.getElementById("enableClickanonyme"),"click",function(){
					addEvent(document.getElementById("divTestAnonyme"),"click",function(){alert("toto");});
				});
 
				addEvent(document.getElementById("disableClickanonyme"),"click",function(){
					removeEvent(document.getElementById("divTestAnonyme"),"click",function(){alert("toto");});
				});
			});
		</script>
	</head>
	<body>
		<input type="button" value="active click nom" id="enableClick" />
		<input type="button" value="desactive click nom" id="disableClick" />
 
		<input type="button" value="active click anonyme" id="enableClickanonyme" />
		<input type="button" value="desactive click anonyme" id="disableClickanonyme" />
		<div id="divTest" style="text-align: center; width: 150px;margin: 10px; border: 1px blue solid">TOTO nom</div>
		<div id="divTestAnonyme" style="text-align: center; width: 150px;margin: 10px; border: 1px blue solid">TOTO Anonyme</div>
	</body>
</html>

27/07/2010, 21h20
Bovino

Citation:

Envoyé par BaBeuH

tu es sûr ? J'ai fait un test justement avant de poster et ça ne marchait pas de supprimer via la même fonction anonyme...

Nom de Zeus !!!
Tu as effectivement raison :oops:
J'avais gardé cette habitude pour décharger mes gestionnaires car j'étais persuadé que ça fonctionnait, mais ce n'est pas le cas...

Au temps pour moi alors et bien vu :)

En peaufinant un peu mon idée précédente, voici ce que ça donnerait.
Mais ici avec destruction totale du contenu de l'evenement, pas sélectif sur une focntion ajoutée...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
<script type="text/javascript">
function ajout(obj,evt,fct){
obj[evt]=fct
}
 
function suppr(obj,evt){
obj[evt]=function(){void(0)}
}
 
function foo(){alert('coucou')}
</script>
</head>
<body>
<input type="button" onclick="ajout(this,'onmouseover',foo)" value='add' id="bar"/>
<input type="button" onclick="suppr(document.getElementById('bar'),'onmouseover')" value='remove' />
</body>
</html>

28/07/2010, 09h17
ne2sbeal

Bon j'ai réussi à le faire fonctionner mais sans les méthodes anonymes. Merci pour votre aide qui m'a été précieuse