遊べるJavaScript入門ロゴ

イベントハンドラーとイベントリスナーの使用例

前のページ(→こちら)のように、イベントハンドラーの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**」のように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


Page Top▲

(来歴)R6.5作成  
PR

AmazonのJavascript本 送料無料


楽天ブックスは品揃え200万点以上!



記事の目次へ

電子工作の記事の目次へ