mathefritz: Handler ändern

zwar funktionert das folgende Minimalbeispiel

<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <style></style>
  </head>
  <body onload="init()">  

    <input type="text" id="tt" onkeyup="h1()"></input>
    <p id="anzeige">anzeige</p>

    <script>    
          var ii;
          var az;
          function init(){ ii = document.getElementById("tt");
                           az = document.getElementById("anzeige");
          }    
         function h1(ev) {
              az.innerHTML = "h1";            
              ii.removeEventListener("keyup",h1);
              ii.addEventListener("keyup",h2);
         }        
         function h2(ev) {
              az.innerHTML = "h2";            
              ii.removeEventListener("keyup",h2);
              ii.addEventListener("keyup",h1);
         }
    </script>
  </body>
</html>

aber ginge das Ändern der Handler von h1 auf h2 und umgekehrt nicht auch mit einer je einzigen Anweisung? Habe schon mit ev.target.keyup = ... probiert, schien einmal zu klappen aber nicht reproduzierbar.

  1. Hi, ohne JQuery ?

    --
    Viele Grüße aus LA ralphi
    1. Danke, verstehe aber nicht was Du mit "ohne JQuery ?" meinst.

      1. Hi,

        Danke, verstehe aber nicht was Du mit "ohne JQuery ?" meinst.

        $( selector ).live( events, data, handler );                // jQuery 1.3+
        $( document ).delegate( selector, events, data, handler );  // jQuery 1.4.3+
        $( document ).on( events, selector, data, handler );        // jQuery 1.7+
        
        $( "#anzeige" ).on( "keyup", function() {
          // mach was
        });
        
        --
        Viele Grüße aus LA
        ralphi
        "Nicht alles was einfach ist, ist genial, aber alles was genial ist, ist einfach" - Albert E.
  2. Hallo

    Es ist ziemlich schwierig dir hier eine zielführende Antwort zu geben, da weder aus deiner Fragestellung noch aus deinem Beispiel heraus ersichtlich wird, was der eigentliche Zweck der Übung ist, weshalb ich dir nur mit ein paar allgemeinen Überlegungen und Hinweisen dienlich sein kann.

    Also, allgemein betrachtet, willst du auf Benutzereingaben in deinem input-Element reagieren, wobei die Anweisungen deines ereignisverarbeitenden Codes dann von bestimmten Bedingungen abhängig sein sollen, das heißt, bezogen auf dein Beispiel, soll B auf A folgen und A auf B.

    Da du hier nicht die Überwachung des Ereignisses von einer Bedingung abhängig machen willst, sondern dessen Verarbeitung, wäre die naheliegendste Lösung, mittels der Methode addEventListener eine oder mehrere Handlerfunktionen zu hinterlegen, innerhalb derer du dann über conditional statements steuerst, welche Anweisungen jeweils ausgeführt werden sollen, statt wie du es gemacht hast, bei jedem Aufruf einer Handlerfunktion einen Event Listener durch einen anderen zu ersetzen.

    Die Frage, wie du das konkret am besten umsetzt, hängt wie gesagt davon ab, was du eigentlich erreichen willst.

    Zu deinem Code:

    <html>
      <head>
        <title></title>
        <meta charset="utf-8">
        <style></style>
      </head>
    

    Dieser Teil deines Beispiels hat mit dem Thema nichts zu tun und du hättest ihn hier auch weglassen können, jedoch sei am Rande erwähnt, dass die Angabe zur Zeichenkodierung am besten das Erste sein sollte, was im head steht.

      <body onload="init()">  
    

    HTML und JavaScript sollten nicht miteinander vermischt werden, also nutze am besten die Methode addEventListener, statt JavaScript-Code in HTML-Attributen zu notieren. Auch muss load nicht unbedingt der richtige Event-Typ sein, sprich, hier wäre DOMContentLoaded als Einstiegspunkt für dein Programm vermutlich die bessere Wahl gewesen.

        <input type="text" id="tt" onkeyup="h1()"></input>
    

    Das Element input hat ein Standalone-Tag, das schließende Tag ist also falsch, und auch hier gilt, trenne Inhalt von Verhalten: Registriere deinen Eventhandler im Script. Außerdem wäre das Event input hier wahrscheinlich passender: addEventListener('input', function ( ) { }). Schließlich ist „tt“ kein ausdrucksstarker Bezeichner, „Eingabe“ beispielsweise würde den Code lesbarer machen.

        <p id="anzeige">anzeige</p>
    

    Für Ausgaben gibt es ein semantisch passenderes Element namens output; und für den Rest deines Codes: siehe oben.

    Gruß,

    Orlok

    1. @@Orlok

      jedoch sei am Rande erwähnt, dass die Angabe zur Zeichenkodierung am besten das Erste sein sollte, was im head steht.

      Und noch davor sollte die Angabe zur Sprache stehen. Für deutschsprachigen Inhalt:

      <html lang="de">
      

      LLAP 🖖

      --
      Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
    2. Danke Orlok für die ausführliche Antwort.

      Ich habe inzwischen durch probieren gefunden daß es wie folgt funktioniert:

                var ii;
                var az;
                function init(){ ii = document.getElementById("tt");
                                 ii.onkeyup = h1;
                                 az = document.getElementById("anzeige");
                }    
               function h1(ev) { az.innerHTML = "h1";            
                                 ii.onkeyup = h2;
               }        
               function h2(ev) { az.innerHTML = "h2";            
                                 ii.onkeyup = h1;
               }
      
      

      Alles in einem Handler zu erledigen ergäbe unübersichtlich tiefe switch-Verschachtelungen.

      Ich bin noch kaum vertraut mit HTML und Javascript, und meine Hardcopy-Dokus dazu sind aus 2002 und 2003 - noch kein HTML5 . Eine HTML-Datei beginne ich, indem ich im Dateimanager Dolphin ( Linux ) "neue HTML Datei erstellen" wähle, und der generiert title vor meta.

      input - ok, da hab ich die Doku nicht gewürdigt, meinen firefox stört </input> nicht.

      Für output scheint aber ein form zwingend zu sein, und im js Tutorial hier wird schreiben ins innerHTML eifrig verwendet.

      Gruß mathefritz