10000hの技術メモ

この先生きのこるための勉強内容＆時間記録

徹底マスター JavaScriptの教科書　第６章　Webブラウザでの入出力　6.3 イベントハンドラの登録とタイマー

JavaScriptの勉強をしています。

徹底マスター JavaScriptの教科書 プログラミングの教養から、言語仕様、開発技法までが正しく身につく (Informatics&IDEA)

徹底マスター JavaScriptの教科書 プログラミングの教養から、言語仕様、開発技法までが正しく身につく (Informatics&IDEA)

今回は6.3から。

6.3 イベントハンドラの登録とタイマー

イベントハンドラとは

イベントハンドラとは、イベントが発生したときに実行される関数のことをいいます。

たとえばボタンがクリックされたらこの処理をする、とか。

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>時刻をコンソールに表示</title>
   <script>
       function displayTime() {
           var d = new Date();
           console.log("現在、" + d.toLocaleString() + "です。");
       }
   </script>
</head>
<body>
    <input type="button" value="click" onclick="displayTime()">
</body>
</html>

これを実行すると、コンソールにクリックしたときの時刻が表示される。なるほど。

onclick="displayTime()"

のところでイベントハンドラを指定していると。

onclickのほかにもondblclickとかonerrorとかがある。本書のP108参照。

違うやり方が、DOMで取得した要素オブジェクトにイベントハンドラを指定する方法。

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>時刻をコンソールに表示</title>
   <script>
       function displayTime() {
           var d = new Date();
           console.log("現在、" + d.toLocaleString() + "です。");
       }
       window.onload = function() {
           var button = document.getElementById("button");
           button.onclick = displayTime;
       };
   </script>
</head>
<body>
        <input type="button" value="click" onclick="displayTime()">
</body>
</html>

今度はwindow.onloadを使って、ウインドウの読み込み終了時にidがbuttonの要素に対してイベントハンドラを指定している。

まだクリックボタンひとつだけだけど、複数の要素全てにイベントハンドラを指定したいときとかにはこっちのほうが良いのかも。

DOMでイベントハンドラを登録する最大の目的は、HTMLのコードとJavascriptのコードを分離することです。

なるほど。

onclickはイベントハンドラを登録するためのプロパティで、イベントハンドラ・プロパティと呼ばれます。

なるほど。（２回め）

イベントハンドラを解除したいときは、

button.click = null;

でOK.

もうひとつのaddEventListenerメソッドを用いる方法については15.2節にて説明らしい。

今日はここまで。

今回の勉強時間：29分 累計勉強時間：16時間34分