更新日: 2017年02月27日
公開日: 2015年12月05日

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

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

ゼロから始める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>


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

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>

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>