第18話:イベントによる処理

第3部 Webページのプログラミング

目次

マンガ








マンガ台詞

【1Page】
先生:さて 今回は 前回の続きだ
    『イベント』を利用して インタラクティブに Webページを操作するぞ
遊:イベント?
    運動会とか 文化祭とか 創立記念日みたいに 授業がない日のこと?
先生:あー まあ そんなところだ
麗:先生 投げやり ですね
先生:(気を取り直して)
    今回扱う『イベント』は ある条件が起きると 実行される処理のことだ
遊:ある条件?
守:どんな条件が あるんですか?
【2Page】
先生:Webページで よく利用される条件を 挙げてみるぞ
        Webページが読み込まれた直後
        ボタンがクリックされた時
        リンクや画像の上にマウスが乗った時
麗:そういえば クリックで 画面が変化したり しますね
先生:ああ
    実は JavaScriptの プログラムを書ける場所は 『<script>』タグ以外にもある
    それが タグの 『on~』で始まる 属性部分になる
        イベント系属性  使用場所      対応イベント
        onLoad="~"    通常はbodyタグ   ファイルが読み込まれた直後
        onClick="~"   ボタンやリンクなど オブジェクトがクリックされた時
        onMouseOver="~" 様々な場所     オブジェクトにマウスが乗った時
    この属性を書いた オブジェクトで 対応するイベントが 発生すると
    プログラムが発動する
    というわけで プログラムを 書いてみるぞ
【3Page】
        <html>
            <head>
                <script type="text/javascript">
                <!--
                function action0() {
                    // 『body』の読み込みが終わった直後に実行
                    alert("実行開始!");
                }

                var count1 = 1;
                function action1() {
                    // 『<div id="target1">』がクリックされた時に実行
                    var ele = document.getElementById("target1");
                    ele.innerHTML = count1 + "回クリック";
                    count1 ++;
                }

                var count2 = 1;
                function action2(ele) {
                    // 『<div onMouseOver="~">』にマウスが乗った時に実行
                    // 引数『this』は2番目の『<div>』
                    ele.innerHTML = count2 + "回マウスオーバー";
                    count2 ++;
                }
                // -->
                </script>
            </head>
            <body onLoad="action0();">
                <div id="target1" onClick="action1();">目標1</div>
                <div onMouseOver="action2(this);">目標2</div>
            </body>
        </html>
        イベント発生で 関数を呼び出し
        『on~』の属性部分に プログラムを記述
    『<body>』のロードが終われば 『実行開始!』と表示されて
    『目標1』を クリックすれば 『1回クリック』と 書き換わり
    『目標2』に マウスを重ねると 『1回マウスオーバー』と変化する
【4Page】
先生:どうだ
    『イベント』を使うと インタラクティブな ページが作れるだろう
遊:なんだか自分が すごいプログラマに なった気がするわ!
先生:ついでに
    もう1ヶ所 プログラムを書ける 場所があるので 教えておく
    リンクを クリックすれば 処理が行われる
        <a href="javascript:alert('クリック!')">クリックしてね</a>
    (画面とダイアログの表示)
        クリックしてね
        クリック!
先生:というわけで 今回は ユーザーの操作によって 処理を行う方法を 紹介した
    いろいろと試して 遊んでみてくれ

説明

この章では、『イベントによる処理』について学びます。

WebページのJavaScriptでは、ページの読み込み時にプログラムを実行するだけでなく、ボタンやリンクをクリックしたタイミングなどで、プログラムを開始させることができます。こういった方法を利用することで、ユーザーの操作に従ったインタラクティブな処理や、ムービーやゲームといった時間とともに進行していく処理を実現できます。

本章では、そういった『特定のタイミングで処理を実行する方法』として、『イベント』を学んでいきます。

『イベント』

『イベント』は、HTMLタグ内の、『イベントハンドラ』というところに書きます。この『イベントハンドラ』は、『on~』という名前の属性になっています。そして、『イベントハンドラ』に対応した『イベント』が起こると、その処理が実行されます。

以下、簡単な例です。

<div onClick="alert('クリックしたよ!');alert('もっとクリックして!');">
    クリックしてね
</div>

このように、タグに『onClick』属性を設定して、属性の値としてプログラムを書きます。こうすれば、そのオブジェクトがクリックされた際に、プログラムを実行することができます。

この時、『onClick="~"』の中に、『"』(ダブルクォーテーション)が書けないことに注意してください。

これは、『"~"~"~"』と書くと、2番目の『"』のところで『"~"』『~"~"』のように切れて、属性の値が終わってしまうためです。上記の例のように、『"~'~'~"』と、『'』(シングルクォーテーション)を使うことで、この問題を避けることができます。

この、属性の値には、HTMLファイル内の別の場所に書いた関数を指定することもできます。また、外部JavaScriptファイルを読み込んでいる場合は、そのファイル内の関数を使うこともできます。

マンガ中のプログラムの解説

以下、マンガ中に出てきた、『イベントハンドラ』から関数を呼び出すプログラムの解説を行います。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <script>
        function action0() {
            // 『body』の読み込みが終わった直後
            alert("実行開始!");
        }

        var count1 = 1;
        function action1() {
            // 『<div id="target1">』がクリックされた時
            var ele = document.getElementById("target1");
            ele.innerHTML = count1 + "回クリック";
            count1 ++;
        }

        var count2 = 1;
        function action2(ele) {
            // 『<div onMouseOver="~">』にマウスが乗った時
            // 引数『this』は2番目の『<div>』
            ele.innerHTML = count2 + "回マウスオーバー";
            count2 ++;
        }
        </script>
    </head>
    <body onLoad="action0();">
        <div id="target1" onClick="action1();">目標1</div>
        <div onMouseOver="action2(this);">目標2</div>
    </body>
</html>

このプログラムでは、3つのタグの『イベントハンドラ』に関数を指定することで、『<head>』タグ内の『<script>』タグに書いた関数を呼び出しています。

3種類のタグ
<body onLoad="action0();">
<div id="target1" onClick="action1();">目標1</div>
<div onMouseOver="action2(this);">目標2</div>

最初の『<body onLoad="">』は、『<body>』タグ部分の読み込みが終了した際に呼び出される処理です。ここでは『action0』関数を呼び出しています。

次の『<div id="target1" onClick="">目標1</div>』は、『<div>』要素内にある文字列『目標1』がクリックされた際に呼び出される処理です。ここでは『action1』関数を呼び出しています。

『action1』関数内では、『id』属性が『target1』の要素(ここではクリックした要素自身の『id』を指定)の中身を書き換えています。結果として、『目標1』という文字列が書き換わっています。

最後の『<div onMouseOver="">目標2</div>』は、『<div>』要素内にある文字列『目標2』の上にマウスが乗った際に呼び出される処理です。ここでは『action2』関数を呼び出しています。

この関数は『action2(this)』と『this』を引数に取っています。この際の『this』は、イベントが呼び出された『<div>』タグ自身の要素を表します。

そのため、『function action2(ele)』という関数の引数『ele』は、イベント呼び出し元の『<div>』タグと同じになります。そして、この変数『ele』のプロパティ『innerHTML』を変更することで、『目標2』という文字列を書き換えています。

『イベント』の詳細な使い方

よく使う『イベントハンドラ』

『イベントハンドラ』の中で、よく使うものを以下に示します。

属性 発生タイミング
onClick クリックされた時
onMouseOver マウスカーソルが乗った時
onMouseOut マウスカーソルが離れた時
onLoad Webページが読込まれた直後
onUnload 他のページに移動する直前
onFocus フォームの部品などが操作対象になった時
onBlur フォームの部品などが操作対象から外れた時
onChange フォームの部品の内容が変更された時
onSubmit フォームの実行がなされた時

『イベント』をプログラムから発生させる

これらの『イベント』は、プログラムから発生させることもできます。よく使うものを、以下に示します。

発生イベント
element.click() クリック
element.focus() オブジェクトを操作対象にする
element.blur() オブジェクトを操作対象から外す
(フォーム).submit() フォームを実行する

『イベント』の詳しい情報を得る

『イベント』が発生したタイミングで、イベントの詳しい情報を入手することもできます。『イベント』の情報は、『(window.)event』オブジェクトに格納されています。

以下、よく使うプロパティを示します。

意味
event.type イベントの種類(例:クリック時は『click』)
event.clientX イベントが発生したX座標(Webページ内)
event.clientY イベントが発生したY座標(Webページ内)
event.screenX イベントが発生したX座標(デスクトップ内)
event.screenY イベントが発生したY座標(デスクトップ内)

『イベント』情報取得の実例と、リンクのキャンセル

以下、プログラムの例を示します。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <a href="#" onclick="alert(event.type); return false;">
            イベント種類
        </a><br>
        <a href="#" onclick="alert(event.clientX + ' ' + event.clientY); return false;">
            クライアント座標
        </a><br>
        <a href="#" onclick="alert(event.screenX + ' ' + event.screenY); return false;">
            スクリーン座標
        </a><br>
    </body>
</html>

最初の『イベント種類』をクリックすると、『イベント』の種類(この場合は『click』)と表示されます。

2番目の『クライアント座標』をクリックすると、Webページ内での、イベントが発生したX座標、Y座標が表示されます。

3番目の『スクリーン座標』をクリックすると、デスクトップ内での、イベントが発生したX座標、Y座標が表示されます。

さて、このコード中で『return false;』と書いてあるのはなぜでしょうか?

この『return false;』は、『<a>』タグの本来の処理(リンクを開く)を、『キャンセルする』という意味になります。

フォームのキャンセル

『return false;』は、フォームによるデータの送信処理をキャンセルする場合にも使用します。以下、フォームの入力内容を確認して、入力が空の場合に、フォームの実行を停止させるプログラムです。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <form
            method="get"
            action="https://www.google.com/search"
            onSubmit="return checkValue(this.q);"
        >
            検索文字列:
            <input type="text" name="q" value="" size=30>
            <input type="hidden" name="ie" value="UTF-8">
            <input type="submit" value="実行">
        </form>

        <script>
        function checkValue(element) {
            if (element.value == "") {
                alert("文字列が空です");
                return false;
            }
        }
        </script>
    </body>
</html>

『submit』(実行)ボタンがクリックされると、送信処理の前に『form』タグの『onSubmit="~"』が実行されます。

『this.q』は、『this』(ここではフォーム)の子要素の中で、『name』属性の値が『q』の要素という意味です。この『this.q』の『value』属性の値が空の場合は、『return false;』で処理をキャンセルさせています。

このプログラムでは、『onSubmit』の値が『checkValue(this.q);』ではなく、『return checkValue(this.q);』になっていることに注意してください。『return』が抜けていると、正しく動作しません。

これは、『onSubmit』の実体が、以下のようになっているからです。

// 『checkValue(this.q);』の場合
form.onSubmit = function(){checkValue(this.q);}

// 『return checkValue(this.q);』の場合
form.onSubmit = function(){return checkValue(this.q);}

『checkValue(this.q);』の場合は、『onSubmit』の戻り値はありません。この場合、『onSubmit』の中で処理が行われるだけで、戻り値が何も設定されていないからです。

対して、『return checkValue(this.q);』の場合は、『onSubmit』の戻り値は『checkValue』関数の戻り値になります。こちらでは、『checkValue』関数の戻り値を、『onSubmit』メソッドの『return』の値として利用しています。

そのため、2番目の例のように『return』を付けた場合のみ、『onSubmit』の戻り値として『false』を戻せることになります。

『イベント』や『イベントハンドラ』を、さらに詳しく知りたい方は、以下も参考にしてください。

参考

『<a>』タグに記述するJavaScript

『on』で始まるイベント系の属性以外にも、プログラムを直接書ける属性部分があるので紹介しておきます。それは、リンクを行うための『』タグ内の『href』属性です。通常、この場所には、リンク先のフィル名やパス、URLなどを書きます。

<a href="http://crocro.com/">クリックしてね</a>

この『href』属性の先頭に『javascript:』と書くことで、プログラムを実行させることができます。以下、プログラムを書いた例です。

<a href="javascript:alert('クリック!')">クリックしてね</a>

この場合『クリックしてね』というリンク部分をクリックすることで、ダイアログが表示されて、『クリック!』という文字列が現れます。

『イベント』への動的な追加

これまで説明した方法では、HTMLタグの『イベントハンドラ』に、『イベント』発生時の処理を直接書き込んでいました。

しかし、状況によっては、プログラムの中からイベント時の処理を追加したいこともあるでしょう。

その際の書き方を紹介しておきます。

以下は、少し高度な話になるので、読み飛ばしても構わないです。ある程度学習が進んでから、再度読み直すとちょうどよいでしょう。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <script>
        // イベント追加関数
        function addEvent(element, eventType, func){
            element.addEventListener(eventType, func, false);
        }

        // イベント追加
        addEvent(window, "load", init);

        // 初期化処理
        function init() {
            // イベント追加
            var target = document.getElementById("target");
            addEvent(target, "click", function(){alert("クリック!")});
        }
        </script>
    </head>
    <body>
        <div id="target">クリックしてね!</div>
    </body>
</html>

『element.addEventListener(eventType, func, false);』というのが、要素にイベント発生時の処理を登録する処理です。『element』の要素の『eventType』というイベントに対して、関数『func』の処理を追加します。

最初のイベント追加『addEvent(window, "load", init);』では、『window』が『load』された時に、『init』という関数を実行するように登録しています。

また、関数『init』では、『id』属性が『target』の要素に対して、『click』した際に『function(){alert("クリック!")}』という無名関数を登録しています。

こうすることで、『window』のロードが終わったあとに、id『target』にクリック時の処理を追加しています。

サンプルの入手

以下は、今回出てきたサンプルです。

ZIPでまとめてダウンロード (右クリックから保存してください)

sample1.html』(『イベント』の例)を表示

sample2.html』(『href』属性での実行)を表示

sample3.html』(『イベント』の利用)を表示

sample4.html』(『onSubmit』のキャンセル)を表示

sample5.html』(『イベント』の動的追加)を表示

プログラムの中身を見たい場合は、それぞれのHTMLファイルをブラウザで開いたあと、右クリックをして『ソースの表示』を選択してください。

メモ帳で、ファイルの中身を見ることができます。

Cronus Crown(クロノス・クラウン)のトップページに戻る
(c)2002-2017 Cronus Crown (c)1997-2017 Masakazu Yanai
このWebPageに関するご意見・お問い合わせは
サイト情報 弊社への連絡
までお願いします。