ボタンをクリックすると説明文が表示されるというような場合に使うのがイベントハンドラーやイベントリスナーと呼ばれるものです。

イベントハンドラーはHTML上に書くもので、イベントリスナーは<script>～</script>に書くというものです。

イベントハンドラーとイベントリスナー

前のページ（→こちら）のように、イベントハンドラーのonclickを使って、ボタンなどをクリックすると小窓に説明を表示する場合は1行で書けるもので簡単なものです。

この、クリックする操作やマウスを画像の上に置くという動作をイベントといい、それによって、何かのアクションを起こすのに使われるのがイベントハンドラーやイベントリスナーと呼ばれるものです。

それらを使って、例えば、クリックすると文字や画像を表示するという動作を行いますが、簡単な例でその違いなどを紹介します。

JavaScriptを使って何かの動作をさせる場合に、色々なやり方があるのは便利な反面、私のような初心者には決まった方法が示される方がわかりやすいと思っていますが、ともかく、下の方法（書き方）は「比較的簡単に書けて、エラーもなく、うまく動く例」です。

過去には、テキストを表示するときに「document.write」という書式が一般的に使われていました。　もちろん、これを使っても動くのですが、トラブルが起きる危険性（→こちらで紹介）から、現在はこれを使ってはいけない（非推奨）ようなので、ここでは、このほかでも使える、汎用的な命令（メソッドやプロパティーなど）を使って、イベントハンドラーとイベントリスナーを使う方法でテキストを表示させています。

イベントハンドラーonclickを使う　

＊＊＊下の画像をクリックすると説明（回答）が表示されるJavaScriptです。

これはナンバープレートの図柄ですが、どこの市町村のものでしょうか？

＊＊＊ここまで。　再動作させる場合は「F5」で再読み込してください。

このJavascript（イベントハンドラ）

<p><img src="img/p03-hirakata.jpg" width="300" height="154" alt="テスト画像" onclick="myDraw()"></p> 　//画像をクリックすると変数「myDraw」に飛ぶ。
<p id="myPic">これはナンバープレートの図柄・・・（略）</p>
　　　　　　//このid="myPic"部分の文章を入れ替えて表示する。
<script>
function myDraw() {　　　　　//「myPic」の内容に変えて表示する。
document.getElementById('myPic').textContent = '♫　ひらパー　♫　・・・（略）';
}

</script>

コードに示した//以降の文章は注釈です。　

コードのコピーをするには、画面を右クリックして、ページのソースを表示させて、それをコピーしてください。

画像はすべて「img」というホルダーにおいているので、img/p03-hirakata.jpg　のような表記になっています。　そして、コード中の「ｍｙ＊＊」のようにmyをつけているのは「変数」で、JavaScriptのメソッドなどと区別できてわかりやすくするために勝手に名付けているものです。

この動作や考え方について

画像をクリックすると、「onclick」で関数の「myDraw」を呼び出して、document.getElementById('myPic').textContent =　で、最初に書いてある文章を「textContent」で表示する…　というものです。

このdocumentは「オブジェクト」と呼ばれるもので、「.getElementById(）」は「メソッド」で、「.textContent」は「プロパティー」と呼ばれるものです。

つまり、「＝」の右のテキスト文を 「.textContent」で表示しなさい…　というものです。

私は、メソッドとプロパティーの違いを、プロパティーはその後ろにイコール「＝」があるもの…　という覚え方をしていています。　このようないい加減な覚え方でも、エラー対応などで役に立っています。

ここで使った書き方（考え方）は、その他でも使える方法なので、同じような場合はこれをマネて使う…　として割り切っておけば、いろいろな場面で使えます。

「.getElementById(）」は、「idを取得する」という表現をされることが多いのですが、テキストを書き出す位置を指定するというためのものです。　

JavaScriptでは、どこに書き出すのか？…というような、「位置を指定すること」が必要になることがよくあります。　これらJavaScriptの書式には少し馴染みにくいのですが、このような独特のやり方（コードの書き方）に慣れていかないといけないのは仕方がないのでしょうね。

PR

イベントリスナー　click　を使う

上ではイベントハンドラー「onclick」を使っていますが、これは、HTLM部分にonclickが書かれています。

このイベントハンドラーは簡単で使いやすいのですが、HTMLとscript部分にまたがるとわかりにくくなったりするという欠点があるので、script内で完結させるように、「イベントリスナー」というものが用意されています。

これは、少し行数の多いJavaScriptになると、読み込みに時間がかかったり、コードを見やすくする必要性から、一般的には、JavaScript部分を別ファイルにして読み込ませる場合が多くなるのですが、その場合はイベントハンドラーではなく、script内に「イベントリスナー」をおいてscript内で完結させる方法にするのがいいようです。

そこで、上と同じようなコードを、イベントリスナーを使って書いてみました。　この方法と両者の違いも覚えておくと良いでしょう。

＊＊＊＊＊＊＊＊＊＊＊ここからプログラム　画像をクリックすると答えが表示。

ラグビーボールと人工衛星の図柄はどこの市町村のナンバープレートでしょう。

＊＊＊＊＊＊＊＊＊＊＊ここまでがプログラム

再動作させる場合は、「F5」で再読込してください。

イベントリスナーを使ったJavaScript

<p><img id="myDraw2" src="img/p02-higasio.jpg" width="300" height="152" ></p>
<p id="myPic2">ラグビーボールと人工衛星の図柄は・・・（略）</p>

<script>

document.getElementById('myDraw2').addEventListener('click', myTxtdraw ) ;

function myTxtdraw() {
document.getElementById('myPic2').textContent = '大阪府東大阪市の・・・（略）　';
}

</script

上のイベントハンドラーを使った場合との違いは、script内にある1行目で、myDraw2の画像をクリックすると、.addEventListener（）によって、myTxtdrawという関数を呼び出しに行って、そこで、myPic2の内容を書き換える…　という動作をしています。

ここでは、HTMLに書いた2行のあとに　<script>～</script>　を書き流していますが、一般的には、</body>の上（すなわちHPの最後部分）にscriptファイルを置くのが普通ですし、さらに、行数の多い場合は、このページと別のところにおいているファイル（拡張子が「.js」）のファイルを呼びに行くようにします。（このやり方は、こちらのような別の所でも紹介しています）

PR

JavaScript部分を分離しておいて呼び出す

このHPはJavaScriptの説明用なので、全て、HPに上から順にHTMLの中にJavaScriptを書いていますが、例えば、この場合でも、

<p><img id="myDraw2" src="img/p02-higasio.jpg" width="300" height="152" ></p>
<p id="myPic2">ラグビーボールと・・・（略）</p>
<script src="js/mypicture.js"></script>   //mypictureは適当に決めた名前

として、たとえば、「maypicture.js」と勝手な名前をつけたファイルをこのHPと別の場所（ここでは「jsホルダー」）に置くことが一般的です。　

<script>～</script>　の部分を別のホルダーに置いておけば、どこからでも、何回でも、これを引っ張ってきて使えますし、そのscriptファイルは外部から見えないので、他の人からはわからないようにJavaScriptを動作させることができます。

PR

---