IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Gestion des événements dans une classe


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Homme Profil pro
    Technicien maintenance
    Inscrit en
    Août 2016
    Messages
    80
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Marne (Champagne Ardenne)

    Informations professionnelles :
    Activité : Technicien maintenance

    Informations forums :
    Inscription : Août 2016
    Messages : 80
    Par défaut Gestion des événements dans une classe
    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>

  2. #2
    Expert confirmé
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 666
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 666
    Par défaut
    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;
    	}
     
    }

  3. #3
    Membre confirmé
    Homme Profil pro
    Technicien maintenance
    Inscrit en
    Août 2016
    Messages
    80
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Marne (Champagne Ardenne)

    Informations professionnelles :
    Activité : Technicien maintenance

    Informations forums :
    Inscription : Août 2016
    Messages : 80
    Par défaut
    Citation Envoyé par mathieu Voir le message
    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

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 15
    Dernier message: 12/05/2016, 12h07
  2. Définir des événements dans une classe
    Par Masmeta dans le forum Windows Forms
    Réponses: 5
    Dernier message: 29/04/2008, 17h41
  3. Gestion des erreurs dans une classe
    Par gregb34 dans le forum ASP.NET
    Réponses: 10
    Dernier message: 26/07/2007, 09h59
  4. Réponses: 2
    Dernier message: 27/03/2005, 16h09
  5. [VB6] Gestion des erreurs dans une dll
    Par zimba-tm dans le forum VB 6 et antérieur
    Réponses: 8
    Dernier message: 02/08/2004, 11h20

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo