Gestion des événements dans une classe

Version imprimable

Bonjour,
Je coince sur la compréhension des problèmes de perte de this et de gestion des événements DOM. Pouvez vous m'aidez un peu?

Par exemple, dans le code suivant:
Je crée un slider codé dans une fonction et affiche la valeur du slider. Cela fonctionne. (ligne 67 -68)
Mais je n'arrive pas à convertir ce code pour le passé dans une classe ???

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <title></title>
 
<style>
</style>
 
  </head>
  <body>
    <header></header>
    <main>
<table border=1px>
  <thead>
    <th>fonction</th>
    <th>classe</th>
  </thead>
  <tbody>
  <tr>
    <td><div id = "GenAff_0"></div></td>
    <td><div id = "GenAff_1"></div></td>
  </tr>
  </tbody>
</table>
 
</main>
    <footer></footer>
  </body>
  <script>
class GenSlider{
        constructor(id) {
                this.id=id;
                this.idcont=document.getElementById(id);
 
                this.conteneurSlider = document.createElement('input');
                this.conteneurSlider.type = "range";
                this.conteneurSlider.min = "0";
                this.conteneurSlider.max = "100";
                this.conteneurSlider.value = "0";
/*              this.conteneurSlider.oninput = this.etat(this.conteneurSlider.value);*/
                this.idcont.appendChild(this.conteneurSlider);
                this.conteneurSlider.oninput=this.etat(()=>this.value);
 
                this.valeur=null;
                this.conteneurValeur = document.createElement('div');
                this.idcont.appendChild(this.conteneurValeur);
 
 
                }
 
        etat(value){
                this.valeur = value;
                if (this.conteneurValeur != "undefined"){
/*                      this.conteneurValeur.innerHTML = this.valeur;*/
 
                }
                let valeurSlider = document.getElementById(this.id).value;
                console.log(this.valeur);
                return this.valeur;
        }
 
}
slider0 = new GenSlider("GenAff_0");
slider1 = new GenSlider("GenAff_1");
 
slider0.conteneurSlider.oninput = function() {
  slider0.conteneurValeur.innerHTML = this.value;
}
  </script>
 
</html>

quand évènement est lancé, le this est lié à la balise qui a lancé l'évènement donc là c'est le slider.
pour que la méthode "etat" se lance dans le contexte de l'objet, vous pouvez faire cela par exemple :

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
class GenSlider
{
 
	constructor(id)
	{
		this.id=id;
		this.idcont=document.getElementById(id);
 
		this.conteneurSlider = document.createElement('input');
		this.conteneurSlider.type = "range";
		this.conteneurSlider.min = "0";
		this.conteneurSlider.max = "100";
		this.conteneurSlider.value = "0";
 
		this.conteneurSlider.oninput = e => this.etat();
 
		this.idcont.appendChild(this.conteneurSlider);
 
		this.valeur=null;
		this.conteneurValeur = document.createElement('div');
		this.idcont.appendChild(this.conteneurValeur);
 
	}
 
	etat() {
 
		if (typeof this.conteneurValeur != "undefined") {
			this.conteneurValeur.innerHTML = this.conteneurSlider.value;
		}
 
		return this.valeur;
	}
 
}

22/09/2022, 14h49
alexis_c
Citation:
Envoyé par mathieu

Code:

1 2 class GenSlider this.conteneurSlider.oninput = e => this.etat();
Je te remercie pour l'exemple donnée.
On regardant dans les docs le "e" énigmatique est donc le raccourcie de event