Ankündigung

Einklappen
Keine Ankündigung bisher.

Hilfe beim Verständnis von EventHandler

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Hilfe beim Verständnis von EventHandler

    Hallo Leute,

    ich bräuchte mal jemanden der mir eine kleine Erklärung zu EventHandlern geben kann.

    Ich habe eine Klasse und möchte in dieser Klasse auf die Variablen (this.beispiel) von einem EventHandler zugreifen, hierzu ein bsp.:

    Javascript:
    Code:
    class beispiel {
       eventListener() {
          /* Hier stehender Code wird beim Klick korrekt ausgeführt */
          console.log(this.name); <<<<<==== bei Klick-Aufruf nicht mehr gültig = "undefined"
          }
    
       eventListenerDefinierer() {
          (objekt).addEventListener("click", this.eventListener);
          console.log(this.name); <<<<==== ist "test"
          }
    
       constructor() {
          this.name = "test";
          this.eventListenerDefinierer();
          }
       }
    Leider hilft mir mein Buch in dieser Hinsicht nicht weiter deswegen wollte ich mal direkt Leute vom Fach fragen

    Zum einen würde ich gerne verstehen (von wo? oder wie?) der EventListener in diesem Fall angesprochen wird. Weil in der Klasse kann es ja scheinbar nicht sein. Wobei der Code ja korrekt ausgeführt wird, lediglich der Aufruf der Variable ist nicht mehr möglich also doch in der Klasse?
    Zum anderen wollte ich Fragen wie so etwas in der Praxis korrekt umgesetzt wird.

    Würde mich freuen wenn ihr mir ein wenig aufschluss geben könntet!

    Vielen Dank und Liebe Grüße


  • #2
    Weil in der Klasse kann es ja scheinbar nicht sein.
    Korrekt. Event Handler (bzw. die Funktion des Event Listeners) werden immer im Kontext des behandelten Elements aufgerufen. Schau dir mal die Ausgabe von console.log(this) an.

    Kommentar


    • #3
      Du kannst Arrow Functions nutzen um den aktuellen this-Context beizubehalten:
      PHP-Code:
      class Button{
        
      constructor(elem){
          
      this.elem elem
          elem
      .addEventListener('click', () => this.onClick()) // !!
        
      }

        
      onClick(){
          
      console.log(this// = Button { .. }
        
      }


      Ab ES7 wird dann auch sowas möglich sein:
      PHP-Code:
      class Button{
        
      constructor(elem){
          
      this.elem elem
          elem
      .addEventListener('click'this.onClick()) // !!
        
      }

        
      onClick = () => { // !!
          
      console.log(this// = Button { .. }
        
      }

      Kommentar


      • #4
        Ah ok also ich verstehe wo das Problem ist.

        lottikarotti
        Funktioniert bei mir leider nicht. Der Aufruf der Klasse findet nicht am Objekt statt sondern direkt wenn die App geladen ist (Phonegap).
        Bei console.log(this) in der eventListener() Funktion wirft er mir das HTML Objekt zurück.

        Die Variable jedoch bleibt weiter undefined.

        "elem" existiert ja auch nur dann wenn ich es an die Klasse übergebe.

        Kommentar


        • #5
          Zitat von TheRat101 Beitrag anzeigen
          Funktioniert bei mir leider nicht.
          "Funktioniert nicht" ist keine sinnvolle Fehlerbeschreibung.

          Zitat von TheRat101 Beitrag anzeigen
          Der Aufruf der Klasse findet nicht am Objekt statt sondern direkt wenn die App geladen ist (Phonegap).
          Mein Beispiel zeigt die Funktionsweise von Arrow Functions im Zusammenhang mit dem this-Context. Wie du diese für dich nutzt bleibt dir überlassen.

          Zitat von TheRat101 Beitrag anzeigen
          Bei console.log(this) in der eventListener() Funktion wirft er mir das HTML Objekt zurück.
          Diese Beschreibung bringt ohne lauffähigen Code leider nix.

          Zitat von TheRat101 Beitrag anzeigen
          Die Variable jedoch bleibt weiter undefined.
          "elem" existiert ja auch nur dann wenn ich es an die Klasse übergebe.
          Ja, und?

          Kommentar


          • #6
            Zitat von lottikarotti Beitrag anzeigen
            "Funktioniert nicht" ist keine sinnvolle Fehlerbeschreibung.
            Fehlerbeschreibung ist ja eigentlich bereits gemacht. >> Siehe Code ganz oben << Welche Informationen könnte ich noch geben? Die Variable verliert Ihre Gültigkeit sobald die Klasse durchlaufen ist und kann daher nicht mehr von dem Eventlistener verwendet werden. Dem möchte ich gegenwirken.

            Zitat von lottikarotti Beitrag anzeigen
            Mein Beispiel zeigt die Funktionsweise von Arrow Functions im Zusammenhang mit dem this-Context. Wie du diese für dich nutzt bleibt dir überlassen.
            Ok ist gemerkt! Aber dadurch ändert sich das Problem nicht das die Variable an Gültigkeit verliert. Was kann ich dagegen tun?

            Zitat von lottikarotti Beitrag anzeigen
            Diese Beschreibung bringt ohne lauffähigen Code leider nix.
            Naja das lauffähige Codebeispiel ist ja ganz oben. Es fehlt lediglich der HTML Teil und der Aufruf der Klasse "let beispielKlasse = new Class()" was ich aber für die Beschreibung überflüssig fand War jedoch auch nur eine Randanmerkung.

            Zitat von lottikarotti Beitrag anzeigen
            Ja, und?
            Problem besteht immer noch!

            Kommentar


            • #7
              Zitat von TheRat101 Beitrag anzeigen
              Fehlerbeschreibung ist ja eigentlich bereits gemacht. >> Siehe Code ganz oben <<
              Was an dem Code fehlerhaft ist wurde schon gesagt. Wo ist deine korrigierte Version?

              Kommentar


              • #8
                hellbringer
                Wie genau soll ich denn eine korrigierte Version stellen, wenn genau das die Frage ist?

                Kommentar


                • #9
                  Zitat von TheRat101 Beitrag anzeigen
                  Wie genau soll ich denn eine korrigierte Version stellen, wenn genau das die Frage ist?
                  Indem du das machst, was dir gesagt wurde. Wenn du eh alles ignorierst, was man dir schreibt, hättest du dir den Beitrag hier im Forum komplett sparen können.

                  Kommentar


                  • #10
                    Wie kommst du denn darauf das ich alles ignoriere?
                    Ich habe es eingebaut auf diese Art, nur das Ergebniss hat sich eben einfach nicht verändert. Also ist das für mich keine Lösung sondern lediglich eine andere Art der Umsetzung die jedoch zum selben Ergebniss führt.
                    Bitte keine unnötigen Vorwürfe...

                    Kommentar


                    • #11
                      Zitat von TheRat101 Beitrag anzeigen
                      Ich habe es eingebaut auf diese Art, nur das Ergebniss hat sich eben einfach nicht verändert.
                      Dann zeig doch bitte den Code.

                      Kommentar


                      • #12
                        Zitat von TheRat101 Beitrag anzeigen
                        Wie kommst du denn darauf das ich alles ignoriere?
                        Na ja, du hast immer noch kein Beispiel lauffähiges präsentiert, bei dem du Arrow Functions verwendest *und* dein Problem nachvollziehbar auftritt. Nutze bspw. https://jsfiddle.net/ um ein Beispiel aufzusetzen, welches wir auch ausführen können.

                        Zitat von TheRat101 Beitrag anzeigen
                        Ich habe es eingebaut auf diese Art, nur das Ergebniss hat sich eben einfach nicht verändert.
                        Schön, und wenn ich meine Glaskugel finden würde, dann könnte ich dir jetzt auch sagen was du falsch gemacht hast

                        Zitat von TheRat101 Beitrag anzeigen
                        Also ist das für mich keine Lösung sondern lediglich eine andere Art der Umsetzung die jedoch zum selben Ergebniss führt.
                        Die Verwendung von Arrow Functions führt zu einem völlig anderen Verhalten in Bezug auf den this-Context. Das ist Fakt. Da stimmt also etwas nicht mit deinem Code.

                        Kommentar


                        • #13
                          Verdammt...! (Und doch ist die Freude groß) ... jetzt habt Ihr mich
                          Habe es auf der von dir angegebenen Seite einfach nachgestellt und dort hat es Funktioniert.

                          Fehler: Habe es beim testen im eigenen Programm in die falsche Zeile (falschen Button) eingefügt, dadurch hat sich natürlich nichts verändert.... *doof*

                          Unterm Strich: Funktionsaufruf über Arrow Funktion löst das Problem und die Variable bleibt gültig


                          Bitte entschuldigt die Umstände!
                          Vielen Dank für die Hilfe

                          Kommentar

                          Lädt...
                          X