Gestion des événements dans une classe

**alexis_c** · 22/09/2022, 11h24

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

**mathieu** · 22/09/2022, 14h07

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 :

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

**alexis_c** · 22/09/2022, 14h49

Envoyé par mathieu

Code :

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

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

Gestion des événements dans une classe

JavaScript

Vue hybride

Discussions similaires

Partager

Partager