Supprimer un evenement

**ne2sbeal** · 27/07/2010, 16h48

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 :

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

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 :

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

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.

**SpaceFrog** · 27/07/2010, 16h49

Code :

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

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

**Bovino** · 27/07/2010, 16h56

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

Code :

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

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);
    }
}

**SpaceFrog** · 27/07/2010, 17h02

arf add ....

= ajout

donc :

Code :

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

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 ^^

**BaBeuH** · 27/07/2010, 17h16

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 :

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

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

Comment ça marche ?

**Bovino** · 27/07/2010, 17h23

Envoyé par BaBeuH

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

Non :

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

**ne2sbeal** · 27/07/2010, 17h45

Envoyé par Bovino

Non :

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

**ne2sbeal** · 27/07/2010, 17h46

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 :

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

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

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

**Bovino** · 27/07/2010, 17h52

Code :

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

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

Tu as mis quoi à la place de "onglet"

**ne2sbeal** · 27/07/2010, 17h53

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

**BaBeuH** · 27/07/2010, 17h56

Envoyé par Bovino

Non :

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

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

**Bovino** · 27/07/2010, 21h20

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

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

**SpaceFrog** · 28/07/2010, 08h49

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 :

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

**ne2sbeal** · 28/07/2010, 09h17

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

Supprimer un evenement

JavaScript

Discussions similaires

Partager

Partager