Matthias Scharwies: window.onload oder addEventListener('load', );

Servus!

molily empfiehlt den ausschließlichen Einsatz von addEventListener, um unobtrusive JavaScript zu erhalten.

Inwieweit könnt ihr in fest umgrenzten Fällen wie kleinen Projekten ein Hinzufügen von Eventhandlern mit der Punkt-Notation noch (oder doch) empfehlen?

var startBtn = document.getElementById('start');
startBtn.onclick = function(){
  // Code-Anweisungen
}

Verwendet Ihr überhaupt noch onload oder eher DOMContentLoaded?

window.onload;

//oder

document.addEventListener("DOMContentLoaded", dokumentGeladen, false);

Herzliche Grüße

Matthias Scharwies

  1. Hallo Matthias,

    Inwieweit könnt ihr in fest umgrenzten Fällen wie kleinen Projekten ein Hinzufügen von Eventhandlern mit der Punkt-Notation noch (oder doch) empfehlen?

    var startBtn = document.getElementById('start');
    startBtn.onclick = function(){
      // Code-Anweisungen
    }
    

    bei dieser Notation wird ein evtl. schon vorhandener Eventhandler überschrieben. Wenn du sicher bist, das das nicht passiert bzw. du genau das willst, spricht mMn nichts dagegen.

    Verwendet Ihr überhaupt noch onload oder eher DOMContentLoaded?

    ich verwende in älteren Projekten noch beides, um den IE8 noch zu unterstützen:

    if(window.addEventListener) window.addEventListener("DOMContentLoaded",JB_initTable,false);
    else if(window.attachEvent) window.attachEvent("onload",JB_initTable); 
    

    Gruß Jürgen

  2. @@Matthias Scharwies

    Inwieweit könnt ihr in fest umgrenzten Fällen wie kleinen Projekten

    Ich sehe nicht, was das mit groß vs. klein zu tun hätte. Eher mit gut™ vs. böse™.

    ein Hinzufügen von Eventhandlern mit der Punkt-Notation noch (oder doch) empfehlen?

    Nicht.

    Verwendet Ihr überhaupt noch onload oder eher DOMContentLoaded?

    Je nachdem. Beides hat seine Berechtigung.

    Du vergleichst hier aber Äpfel mit Birnen. Worum geht’s dir? Um die Events load (ohne on!) vs. DOMContentLoaded? Dann wären

    document.addEventListener('load', dokumentGeladen, false);
    

    und

    document.addEventListener('DOMContentLoaded', dokumentGeladen, false);
    

    vergleichbar.

    Oder geht’s immer noch um die Syntax?

    LLAP 🖖

    --
    „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
    „Hat auf dem Forum herumgelungert …“
    (Wachen in Asterix 36: Der Papyrus des Cäsar)
  3. Hallo Matthias

    molily empfiehlt den ausschließlichen Einsatz von addEventListener, um unobtrusive JavaScript zu erhalten.

    Naja, das Prinzip des unobtrusive JavaScript disqualifiziert – zumindest nach meinem Verständnis des Begriffs – höchstens die Registrierung von Eventhandlern über HTML-Attribute, erfordert aber wohl im engeren Sinne nicht unbedingt den Einsatz der Methode addEventListener, jedenfalls sofern man hier die Anwendung von best practices nicht als zwingende Voraussetzung betrachtet.

    Inwieweit könnt ihr in fest umgrenzten Fällen wie kleinen Projekten ein Hinzufügen von Eventhandlern mit der Punkt-Notation noch (oder doch) empfehlen?

    var startBtn = document.getElementById('start');
    startBtn.onclick = function(){
      // Code-Anweisungen
    }
    

    Mitentscheidend ist hier wohl die Frage, was unter „fest umgrenzt“ zu verstehen sein soll. Ich meine, wie heißt es so schön: „Vorhersagen sind schwierig, besonders wenn sie die Zukunft betreffen.“ Sprich, in der Regel dürfte es kaum mit Sicherheit absehbar sein, ob ein zunächst mal ‚kleines‘ Projekt nicht an einem späteren Zeitpunkt doch noch skaliert.

    Die Methode addEventListener ist gegenüber der Registrierung mittels Eigenschaftszuweisung deutlich robuster und sollte, auch um mögliche zukünftige Erweiterungen zu antizipieren, grundsätzlich empfohlen werden, unabhängig vom anfänglichen Umfang eines Projektes.

    Verwendet Ihr überhaupt noch onload oder eher DOMContentLoaded?

    window.onload;
    
    // oder
    
    document.addEventListener("DOMContentLoaded", dokumentGeladen, false);
    

    Wie Gunnar bereits sagte, sind die Ereignisse load und DOMContentLoaded zwei verschiedene Paar Schuhe, das heißt, die Verwendung des ein oder anderen Ereignistyps hängt davon ab, was im Einzelfall gebraucht wird, sprich, genügt es in das Programm einzusteigen, wenn das DOM fertig geladen und geparst wurde oder muss damit gewartet werden, bis wirklich alle Ressourcen geladen sind.

    Zu beachten ist hierbei übrigens, dass es keine entsprechende Objekteigenschaft für das Ereignis DOMContentLoaded gibt, dass heißt, eine Überwachung dieses Ereignisses muss ohnehin mittels der Methode addEventListener erfolgen!

    Schließlich sei an dieser Stelle noch erwähnt, dass der dritte Parameter für das Capturing bei der Methode addEventListener optional ist und false dessen Defaultwert, man sich diese Angabe mithin also sparen kann. Aber das nur am Rande. ;-)

    Viele Grüße,

    Orlok

    1. Servus!

      Vielen Dank für eure Rückmeldungen!

      Inwieweit könnt ihr in fest umgrenzten Fällen wie kleinen Projekten ein Hinzufügen von Eventhandlern mit der Punkt-Notation noch (oder doch) empfehlen?

      Mitentscheidend ist hier wohl die Frage, was unter „fest umgrenzt“ zu verstehen sein soll. ... Die Methode addEventListener ist gegenüber der Registrierung mittels Eigenschaftszuweisung deutlich robuster und sollte, auch um mögliche zukünftige Erweiterungen zu antizipieren, grundsätzlich empfohlen werden, unabhängig vom anfänglichen Umfang eines Projektes.

      Ok, dann werde ich diese Methode (im DOM-Tutorial) nur vorstellen und mit diesem Hinweis versehen:

      {{Beachten|,|dass bei dieser Notation ein evtl. schon vorhandener Eventhandler überschrieben wird.
      Deshalb sollte die Methode [[addEventlistener]] verwendet werden, um
      *evtl. schon vorhandene Event-Handler von anderen Programmierern zu berücksichtigen
      *mögliche Erweiterungen nicht von vorneherein auszuschließen.}}
      

      Verwendet Ihr überhaupt noch onload oder eher DOMContentLoaded?

      window.onload;
      
      // oder
      
      document.addEventListener("DOMContentLoaded", dokumentGeladen, false);
      

      Wie Gunnar bereits sagte, sind die Ereignisse load und DOMContentLoaded zwei verschiedene Paar Schuhe, [....]

      Zu beachten ist hierbei übrigens, dass es keine entsprechende Objekteigenschaft für das Ereignis DOMContentLoaded gibt, dass heißt, eine Überwachung dieses Ereignisses muss ohnehin mittels der Methode addEventListener erfolgen!

      und genau das wäre dann die passende Gelegenheit zuerst die traditionelle Methode vorzustellen und dann nach dem Hinweis DOMContentLoaded und die dafür nötige Methode vorzustellen.

      Herzliche Grüße

      Matthias Scharwies

      PS: Wie genau haltet ihr das mit der Konvention, Strings in Hochkommas oder doppelte Anführungszeichen zu setzen?

      document.addEventListener('DOMContentLoaded', init);
      //oder
      document.addEventListener("DOMContentLoaded", init);
      
      1. @@Matthias Scharwies

        und genau das wäre dann die passende Gelegenheit zuerst die traditionelle Methode vorzustellen und dann nach dem Hinweis DOMContentLoaded und die dafür nötige Methode vorzustellen.

        Dagegen! Wozu zuerst vorstellen, wie man es nicht machen sollte? Einige Leser mögen sich damit zufriedengeben („funzt ja“) und nicht weiterlesen.

        Ich denke, zuerst sollte beschrieben werden, wie man es wirklich machen sollte. Danach kann die traditionelle Methode erwähnt werden – mit dem Hinweis „nicht machen, weil …“

        LLAP 🖖

        --
        „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
        „Hat auf dem Forum herumgelungert …“
        (Wachen in Asterix 36: Der Papyrus des Cäsar)
      2. Tach!

        PS: Wie genau haltet ihr das mit der Konvention, Strings in Hochkommas oder doppelte Anführungszeichen zu setzen?

        Es gibt keinen Unterschied zwischen beiden in Javascript. Kann man verwenden wie man mag.

        “Using single quotes saves bandwidth because you don’t have to send the extra pixels. #performance #truestory”

        dedlfix.

        1. @@dedlfix

          PS: Wie genau haltet ihr das mit der Konvention, Strings in Hochkommas oder doppelte Anführungszeichen zu setzen?

          Es gibt keinen Unterschied zwischen beiden in Javascript. Kann man verwenden wie man mag.

          Ja, aber …

          LLAP 🖖

          --
          „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
          „Hat auf dem Forum herumgelungert …“
          (Wachen in Asterix 36: Der Papyrus des Cäsar)