☰

DOMContentLoaded イベント内のコードが機能しない 質問する

tag-icon • tag-icon javascript babeljs addeventlistener domcontentloaded
DOMContentLoaded イベント内のコードが機能しない 質問する

利用した

<!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>

しかし、内部のコードdocument.addEventListener('DOMContentLoaded', function () {});が読み込まれていないようです。

これをコードから削除すると、突然動作するようになります。

私はJSビンはこちら。

ベストアンサー1

おそらく、DOMContentLoadedこの時点でイベントがすでに発生しているためです。一般的にベストプラクティスは、ドキュメントの準備完了状態そのイベントをリッスンする必要があるかどうかを判断します。

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() {}

おすすめ記事