Code innerhalb DOMContentLoaded-Ereignis nicht funktioniert

Habe ich verwendet

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
</head>
<body>
  <button type="button" id="button">Click</button>
  <pre id="output">Not Loading...</pre>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.17.0/babel.min.js"></script>
  <script type="text/babel">
    document.addEventListener('DOMContentLoaded', function () {
      const button = document.getElementById('button');
      const output = document.getElementById('output');

      output.textContent = 'Loading...';

      addEventListener('click', function () {
        output.textContent = 'Done';
      });
     });
  </script>
</body>
</html>

aber es scheint der code innerhalb document.addEventListener('DOMContentLoaded', function () {}); ist nicht geladen.

Wenn ich zu entfernen dieses aus meinem code, es plötzlich funktioniert.

Ich habe eine JS Bin hier.

FWIW, es gibt überhaupt keine Notwendigkeit für die Verwendung von DOMContentLoaded. Das Skript ist bereits am Ende des Dokuments, die ist ausreichend gut genug.
Warum fügen Sie text/babel geben Sie Ihrem Skript?
Dies ist nur ein Beispiel. In meinen anderen scripts, ich bin mit Pfeil-Funktionen, so dass ich babel zu konvertieren, die es von ES6 nach ES5
Aber wenn ich es entfernen, code hat funktioniert.
Die OP ist über Babel Standalone zu verwenden Babel ist transpiling im den browser. Das ist, wie Sie sagen, "Babel " Standalone", welche Skripte es sollte transpile.

InformationsquelleAutor Jamgreen | 2016-10-12

  1. 31

    Es ist wahrscheinlich, weil die DOMContentLoaded Veranstaltung war bereits abgefeuert an dieser Stelle. Beste Praxis im Allgemeinen ist zu prüfen, für Dokument.readyState, um zu bestimmen, ob oder nicht, müssen Sie einen Listener für dieses Ereignis überhaupt.

    if( document.readyState !== 'loading' ) {
    console.log( 'document is already ready, just execute code here' );
    myInitCode();
} else {
    document.addEventListener('DOMContentLoaded', function () {
        console.log( 'document was not ready, place code here' );
        myInitCode();
    });
}

function myInitCode() {}
    Nice man-er hat die OP Fragen mich, was zu tun ist, ob es ausgeführt hätten, um mich inspirieren hinzufügen, dass, dann sehe ich Sie schon hatte...
    Ha, ja, ich denke, das ist so ziemlich der standard in vanilla JS heutzutage.
    Naja, ich denke, dass der standard-Weg zu gehen, nur um sicherzustellen, dass die script ist am Ende des Körpers und nicht Aufhebens mit DOMContentLoaded. Es ist nur code, wo der Autor hat keine Kontrolle darüber, wo der script-tag wird gehen, müssen diese (wie lustig, Babel Standalone).
    Ist, so T. J.? Wenn Ihr Skript-block wird an das Ende des Körpers, es kann nie kollidieren mit "andere Sachen" DOMContentLoaded-Uhren mehr?
    Überprüfen Sie nicht für document.readyState === 'complete'! Überprüfen Sie für document.readyState !== 'loading', weil es nutzlos ist zu hören, für DOMContentLoaded wenn document.readyState ist "interaktiv". Testen Sie Ihre Fehler und korrigieren Sie den code.

    InformationsquelleAutor jAndy

  2. 12

    Die Veranstaltung hat bereits ausgelöst durch die Zeit, die code hooks. Der Weg Babel standalone arbeitet, ist durch die Reaktion auf DOMContentLoaded von der Suche und der Durchführung aller von der type="text/babel" Skripts auf der Seite. Sie können dies in der index.js - Datei:

    //Listen for load event if we're in a browser and then kick off finding and
//running of scripts with "text/babel" type.
const transformScriptTags = () => runScripts(transform);
if (typeof window !== 'undefined' && window && window.addEventListener) {
  window.addEventListener('DOMContentLoaded', transformScriptTags, false);
}

    Führen Sie einfach den code direkt, ohne zu warten, für die Veranstaltung, da Sie wissen, Babel standalone warten es für Sie.

    Beachten Sie auch, dass, wenn Sie Ihr Skript am Ende des Körpers, unmittelbar vor dem schließenden </body> tag, es gibt keine Notwendigkeit zu warten, für DOMContentLoaded auch wenn Sie nicht verwenden Babel. Alle der oben definierten Elemente das Skript vorhanden und werden zur Verfügung, um Ihr Skript.

    In einem Kommentar, den du gefragt hast:

    Aber ich bin mit Babel standalone in der Entwicklung, aber ich werde pre-kompilieren, wenn ich in Produktion gehen. Sollte ich es wieder auf, wenn ich in Produktion gehen?

    Nur sicher, dass Ihre script - tag ist am Ende body wie oben beschrieben, und es gibt keine Notwendigkeit zu verwenden die Veranstaltung.

    Wenn es dir wichtig ist, es trotzdem zu benutzen, können Sie überprüfen, um zu sehen, ob das Ereignis bereits durch die Prüfung Dokument.readyState (nachdem Sie den link, scrollen Sie nach oben ein bisschen):

    function onReady() {
    //...your code here...
}
if (document.readyState !== "loading") {
    onReady(); //Or setTimeout(onReady, 0); if you want it consistently async
} else {
    document.addEventListener("DOMContentLoaded", onReady);
}

    document.readyState geht durch diese Phasen (scrollen Sie etwas nach oben aus dem link oben):

    Zurück "loading" während das Dokument geladen wird, "interactive" sobald es fertig ist, analysieren aber immer noch loading sub-Ressourcen, und "complete" sobald es geladen wurde.

    Aber ich bin mit Babel standalone in der Entwicklung, aber ich werde pre-kompilieren, wenn ich in Produktion gehen. Sollte ich es wieder auf, wenn ich in Produktion gehen?
    Ich habe ein Antwort Kommentar zur Antwort oben.
    Sie. ich war irregeführt durch die Skillung zu sagen "Jedes Dokument hat einen aktuellen Dokument Bereitschaft. Wenn ein Dokument-Objekt erstellt wird, muss es seine aktuelle Dokument Bereitschaft gesetzt, um den string "laden", wenn das Dokument ist in Zusammenhang mit einem HTML-parser, einen XML-parser oder XSLT-Prozessor, und der string "komplett" anders. Verschiedene algorithmen beim laden der Seite beeinflussen diesen Wert. Wenn der Wert eingestellt ist, der Benutzer-agent müssen Sie Feuer ein einfaches Ereignis namens " readystatechange an das Document-Objekt.", Sondern nur oben, ist es klar, dass es ist ein Zwischenprodukt "interactive" Zustand! 🙂

    InformationsquelleAutor T.J. Crowder

  3. 0

    Dank Ruslan & hier ist der vollständige code-snippet mit dem bequemen trennen von der DOMContentLoaded handler, nachdem er verwendet wird.

    'use strict';
var dclhandler = false;
if (document.readyState !== 'loading') {
    start();
} else {
    dclhandler = true;
    document.addEventListener('DOMContentLoaded', start);
}
function start() {
    if (dclhandler) { document.removeEventListener('DOMContentLoaded', start); }
    console.log('Start the site`s JS activities');
}

    InformationsquelleAutor bob-12345

Schreibe einen Kommentar