【JavaScript入門】イベントの処理

これまではHTMLファイルを読み込むとすぐに実行されるコードを扱ってきましたが、ここでは、「ボタンのクリック」や「キーボードのキーを押す」などの操作に対応して結果を返すコードを扱います。

このように、プログラムを動かすきっかけとなるとこを「イベント」と言います。

JavaScriptでは、イベントに対応して実行される関数を指定することで、操作ができるwebページを作ることができます。

イベントの処理
イベント処理の事例：文字数カウントサイトの作成
まとめ

イベントの処理

イベントの働きは、先ほども少し触れましたが、イベントが発生した時に対応した関数が実行されるように設定しておく必要があります。

イベントの設定にはイベントリスナーを指定する方法が主流になっていて、指定する関数も無名関数を使って行いたい処理を指定する方法が一般的です。addEventListener()を使って次のような形で利用します。

対象の要素.addEventListener(イベントタイプ名, function() {
	行いたい処理
});

ちなみに、定義された関数を利用する場合は次のようになります。

対象の要素.addEventListener(イベントタイプ名, 実行したい関数名func);

この場合、関数に引数を指定することはできません。

イベントタイプ名に指定するイベントの種類は、マウス操作ではclick、mouseover、mousemoveなど、キーボード操作ではkeyup、keydown、keypressなど、その他色々ありますので、MDNのサイトや書籍などで必要に応じて確認しましょう。

イベント処理の事例：文字数カウントサイトの作成

具体的にイベント処理を行うコードを書いてみます。

完成イメージとして、次のようなものを作ってみようと思います。

index.html、script.js、style.cssファイルを準備します。

index.htmlは次のようにコードを記述します。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>JavaScriptの基礎</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1>JavaScriptの基礎</h1>
        <h2>イベント処理</h2>
        <p>文字数を計算します。</p>
        <button id="button">文字数カウント</button>
          <p><textarea id="textarea" name="textarea" rows="8" cols="80"></textarea></p>
    <script type="text/javascript" src="script.js"></script>
    </body>
</html>

ボタンとテキストエリアを作っているコードです。JavaScriptで操作する為にそれぞれにidを設定しています。

style.cssファイルに次のコードを書いておきます。

#textarea {
  display: none;
}

こうすることで、テキストエリアが非表示にしておくことができます。

index.htmlをブラウザで表示すると次のようになります。

ここでscript.jsファイルに、次のコードを記述します。

var button = document.getElementById('button');
var textarea = document.getElementById('textarea');

button.addEventListener('click', function() {
  textarea.style.display = 'block';
});

getElementById()でボタンとテキストエリアの要素を取り出します。addEventListener()でボタンがクリックされた時のイベントを指定します。無名関数の中で、テキストエリアのスタイルについてCSSで非表示にしていた部分を無効にして表示するように操作を指定しています。

「文字数カウント」のボタンをクリックすると次のようのテキストエリアが表示されます。

これに文字を入力しても何も起こりません。今回は入力した文字を数える処理を行いたいので、script.jsファイルのコードを次のように追記します。

var button = document.getElementById('button');
var textarea = document.getElementById('textarea');

var inputText = document.createElement('div');
var parent = textarea.parentElement;
parent.insertBefore(inputText, textarea);

button.addEventListener('click', function() {
  textarea.style.display = 'block';
});

textarea.addEventListener('keyup', function() {
  var inputTextNum = textarea.value.length;
  inputText.innerHTML = '<p>ただいま「' + (inputTextNum) + '」文字です。</p>';
});

最初の2行はこれまでと同じです。

次にcreateElement()を使って新しいタグを設定しています。textareaを親要素として、この前にタグ要素を挿入するようにしています。

このあたりはDOMの操作のところで扱いました。

【JavaScript入門】DOMとHTML/CSSの操作

JavaScriptを使って、HTMLやCSSを操作することでWebページの内容を変更する方法を扱います。DOM（Document Object Model）という仕組みとWebページのオブジェクト構造を理解して要素の操作を行います。

次のボタンのイベントリスナーは先ほどと同じコードです。その下に、textareaについてのイベントを設定しています。addEventListener()を使って、keyupというイベントを指定しています。このkeyupはキーボードのキーを離したときに発生するイベントのタイミングということになります。その時の処理を無名関数で設定していますが、入力した文字のvalueをlengthを使って長さを取り出しています。この取り出した値をinnerHTMLを使って追加したdiv要素のところに出力するようにしています。

これをブラウザで表示して、「文字カウント」のボタンを押してテキストエリアを表示し、中に「入力した文字数を計算します。」の文字を入力すると次のように表示されます。

入力した文字が14文字と計算されて表示されているのがわかります。

このようにして、イベントと処理を結びつけて表示を変更することができます。他にもいろんなイベント処理ができるので調べてみてください。ここでは先に話が進む中で色々と他のものを扱って行こうと思います。