Désabonnement d'un événement

**shurkan** · 31/03/2019, 19h47

Bonsoir à tous,

Je débute en Javascript et je suis face à un problème qui me scie l'esprit en deux: comment désabonner un événement? :/
En fait je veux que des que la largeur de "element" est supérieure à 500px, l'événement qui lui est associé est désabonné. Je sais qu'il faut utiliser removeEventListener(); mais je dois probablement mal l'utiliser, j'ai fais des recherches mais je tombe sur des choses assez complexes c'est pourquoi je viens chercher votre aide. Merci beaucoup d'avance

Voici le

Code HTML :

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
<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml" >
 
 
<head>
 
	<title>eclipse</title>
	<meta charset="UTF-8"/>
 
	<link href="style/style-exo5.css" type="text/css" rel="stylesheet" />
 
	<script src="scripts/exo5.js"></script>
 
</head>
 
<!-- corps du document -->
<body>
	<h1>premiers événements : eclipse</h1>
 
	<div id="doc">
	  <div id="buttons">
	    <button id="plus">+</button>
	    <button id="moins">-</button>
	  </div>
	  <img id="sun" src="../images/soleil.jpg" alt="soleil" />
	</div>
 
</body>
 
</html>

Voici le

Code javascript :

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
var setUpListeners = function() {
	var bouton_plus = document.getElementById("plus");
	var bouton_moins = document.getElementById("moins");
	var element = document.getElementById("sun");
 
	bouton_plus.addEventListener("click", agrandir);
	bouton_moins.addEventListener("click", retrecir);
 
	if (element.width > 500) {
	bouton_plus.removeEventListener("click", agrandir);
}
}
 
window.addEventListener("load", setUpListeners);
 
 
 
var agrandir = function() {
	/* fonction qui sert à agrandir la largeur de element de 20px */
  var element = document.getElementById("sun");
  element.style.width = (element.width + 20).toString() + 'px';
 
 
}
 
var retrecir = function() {
	/* fonction qui sert à rétrécir la largeur de element de 20 px*/
  var element = document.getElementById("sun");
  element.style.width = (element.width - 20).toString() + 'px';
}

**danielhagnoul** · 31/03/2019, 21h19

Plusieurs petites erreurs avec style.width et comparaison d'un texte avec un nombre.

Exemple :

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
52
53
54
window.addEventListener('load', ev => {
    // le DOM est construit et la page web est visible
 
    // début code du test
 
    const
        bouton_plus = document.getElementById("plus"),
        bouton_moins = document.getElementById("moins"),
        element = document.getElementById("sun");
 
 
    const agrandir = function () {
 
        // debug, console, touche F12
        console.log('agrandir : ', element.offsetWidth);
 
        if (element.offsetWidth > 480) {
            alert(`Taille maximum 480 px`);
            // element.style.width = '480px';
            bouton_plus.removeEventListener("click", agrandir, false);
        } else {
            element.style.width = (element.offsetWidth + 20).toString() + 'px';
        }
 
        // debug, console, touche F12
        console.log('agrandir : ', element.offsetWidth);
    }
 
    const retrecir = function () {
 
        // debug, console, touche F12
        console.log('retrecir : ', element.offsetWidth);
 
        if (element.offsetWidth < 40) {
            alert(`Taille minimum 40 px`);
            element.style.width = '40px';
        } else {
            element.style.width = (element.offsetWidth - 20).toString() + 'px';
        }
 
        // debug, console, touche F12
        console.log('retrecir : ', element.offsetWidth);
    }
 
    bouton_plus.addEventListener("click", agrandir);
    bouton_moins.addEventListener("click", retrecir);
 
    // fin code du test
 
}, {
    capture: false,
    passive: true,
    once: false
});

**shurkan** · 31/03/2019, 21h32

Salut à toi Danielhagnoul,

Merci énormément d'avoir pris le temps de me répondre et d'avoir fourni une réponse aussi complète

Néanmoins je t'avoue être un grand débutant et ne pas comprendre grand chose, mais en m'inspirant de ta structure de code, j'ai réussi à résoudre le problème:
(ce code permet bien de désabonner et ne génère pas d'erreur dans la console donc j'espère que c'est bon ^^).
Un géant merci à toi pour ton aide ^.^

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
 
 
var setUpListeners = function() {
	var bouton_plus = document.getElementById("plus");
	var bouton_moins = document.getElementById("moins");
	var element = document.getElementById("sun");
 
 
 
	var agrandir = function() {
	/* */
	var element = document.getElementById("sun");
	element.style.width = (element.width + 20).toString() + 'px';
	if (element.width > 500) {
			bouton_plus.removeEventListener("click", agrandir);
		}
 
	}
 
	var retrecir = function() {
	/* */
		var element = document.getElementById("sun");
		element.style.width = (element.width - 20).toString() + 'px';
		if (element.width < 200) {
			bouton_moins.removeEventListener("click", retrecir);
		}
	}
 
	bouton_plus.addEventListener("click", agrandir);
	bouton_moins.addEventListener("click", retrecir);
}
 
window.addEventListener("load", setUpListeners);

Désabonnement d'un événement

JavaScript

Discussions similaires

Partager

Partager