ゼロから始めるJavaScript講座Vol18 DOM操作〜イベントの実行タイミング〜



ゼロから始めるJavaScript講座Vol18 DOM操作〜イベントの実行タイミング〜
目次
  1. ゼロから始めるJavaScript講座DOM操作イベントの実行タイミング
  2. 実行タイミング

ゼロから始めるJavaScript講座DOM操作イベントの実行タイミング

実行タイミング

HTMLとJavaScriptはコードの上から順番に逐次実行が行われています。まずはお手本通りプログラムを作成してみましょう。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>実行タイミング</title>
</head>
<body>
    <script>
        var text = document.getElementById('text');
        text.innerHTML = '書き換え完了';
    </script>

    <p id="text">書き換え前</p>
</body>
</html>

javascript-event2-1-639


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>実行タイミング</title>
</head>
<body>
    <p id="text">書き換え前</p>

    <script>
        var text = document.getElementById('text');
        text.innerHTML = '書き換え完了';
    </script>
</body>
</html>

javascript-event2-2-639

javascript-event2-3-639

sequential_1.htmlの場合、script要素(JavaScript)p要素

sequential_2.htmlの場合、p要素script要素(JavaScript)


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>実行タイミング</title>
    <script>
        function text_overwrite(){
            var text = document.getElementById('text');
            text.innerHTML = '書き換え完了';
        }
        var button = document.getElementById('overwrite');
        button.addEventListener('click', text_overwrite, false);
    </script>
</head>
<body>
    <p id="text">書き換え前</p>
    <button id="overwrite">書き換え実行</button>
</body>
</html>

javascript-event2-5-639

button要素がクリックされたらp要素の内容を書き換えるプログラムですが、button要素が作成されるより前にJavaScriptを実行しているため、動作しません。

p要素やbutton要素の後にscript要素(JavaScript)を書くようにすれば動作しますが、一般的にscript要素(JavaScript)はhead要素の中に記載します。

head要素に記載したままでイベントを監視するためには、以下を追記します。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>実行タイミング</title>
    <script>
        function text_overwrite(){
            var text = document.getElementById('text');
            text.innerHTML = '書き換え完了';
        }
        window.onload = function () {
            var button = document.getElementById('overwrite');
            button.addEventListener('click', text_overwrite, false);
        }
    </script>
</head>
<body>
    <p id="text">書き換え前</p>
    <button id="overwrite">書き換え実行</button>
</body>
</html>

javascript-event2-5-639

javascript-event2-6-639

window.onloadはWebページを読み終えた(loadイベント)に対するイベントハンドラです。

このイベントはHTML文書が全て読み込まれた後に発生するため、getElementByIdメソッドによる要素取得が正常に行われます。

「window.onload」と同じ処理をaddEventListenerメソッドで書くことも可能です。

javascript-event2-7-639

どちらもwindowオブジェクトのloadイベントを監視しており、loadイベントが発生した際、「function(){…}」の中に記載した内容が実行されます。

「function(){…}」という書き方ですが、これを無名関数無名関数

  • 関数名の重複を考えなくて良い- 命名する必要の無い関数をシンプルに記述できる

といったメリットがあります。

javascript-event2-8-639

clickイベントにも利用しているaddEventListenerメソッドのほうを見てみると、引数にイベント発生時に呼び出す関数名無名関数

ページ読み込み時の処理は一度しか行わないため、処理を関数化せず、無名関数を利用しシンプルな記述を行っています。

なおWebページの読み込み完了に関しては「window.onload=function(){…}」のほうを利用するのが一般的で、本講義でもこちらを利用します。

NEXTLESSONDOM操作要素の作成・追加DOM操作要素の作成・追加

PREVLESSONDOM操作イベントハンドラDOM操作イベントハンドラ

CodeCampus編集部
この記事を書いた人
CodeCampus編集部
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp