イベント

イベントとは

入力（インプット）、加工、そして出力（アウトプット）という基本的な処理の流れを説明しました。
それでは、いつその処理をすればいいのでしょうか？

たとえば、kintone のレコード追加画面を開いたとき日付フィールドに今日から 1 ヵ月後の日付をセットしたい場合、処理を行うタイミングは「レコード追加画面を開いた時」です。
いつ処理をするのかを決めるきっかけを JavaScript では「イベント」と呼びます。
リンクやボタンをクリックしたり、レコードの追加・編集画面を開いたり、またレコードの保存が完了した時などさまざまなタイミングで「イベント」は発生します。

イベントとイベントハンドラー

イベントは、処理を行うタイミングでした。イベントを書くとき一緒に覚えておきたいのが、イベントハンドラーです。
イベントハンドラーとは、特定のイベントに反応して処理を行うものです。イベントを受けて処理につなげます。
また、イベントハンドラーには、関数を登録できます。

イベントの書き方

イベントに関数を紐付けることによって処理が実行されます。
JavaScript のイベントの書き方は次の 2 種類に分類できます。

要素オブジェクトの on プロパティとして指定する方法
addEventListener() 関数を使って指定する方法

ここでは JavaScript のイベントの書き方について学習しましょう。

1. 要素オブジェクトの on プロパティとして指定する方法

1 つ目は、要素オブジェクトの on プロパティにイベント処理を記述する方法です。
記述方法は次のとおりです。

要素オブジェクト.onプロパティ = 関数名;

ここでは「クリックしたとき」を例に書き方を学びましょう。
お知らせアプリでレコードの既読チェックカスタマイズをしてみようの見出しの「概要」をクリックしたとき、コンソールにメッセージを表示します。

上記記事を開いた状態で、コンソールに直接 JavaScript でプログラムを書いてみます。
開発者ツールのコンソールを開き、> の横に次のコードを入力しましょう。

1
2
3


document.getElementById('step1').onclick = () => {
  console.log('概要がクリックされました');
};

入力し終えたら Enter（Mac は return）キーを押します。
見出しの「概要」をクリックしましょう。

次のようにコンソールに「概要がクリックされました」と表示されたら成功です。

解説

on○○ は、○○ した時に対しての処理をするイベントです。
今回は onclick を使用しましたが、他にも onmouseover はマウスオーバー時の処理、onload はページ表示時の処理を実行できます。
document.getElementById() で、HTML 内の id 要素を指定します。
その要素をクリックしたときの処理は () => {} 内に記述します。

2. addEventListener() 関数を使って指定する方法

2 つ目は、addEventListener() 関数を使用する方法です。
記述方法は次のとおりです。

要素オブジェクト.addEventListener('イベントの種類', 関数名, false);

それでは同じように「クリックしたとき」を例に書き方を学びましょう。
先ほど使った、お知らせアプリでレコードの既読チェックカスタマイズをしてみようの見出しの「概要」を今回も使います。

上記記事を開いた状態で、コンソールに直接 JavaScript でプログラムを書いてみます。
前回のコードが適用されているので、F5 キー（Mac は command + R）を押して画面をリフレッシュしてから、開発者ツールのコンソールを開き、> の横に次のコードを入力しましょう。

1
2
3
4
5


const step1 = document.getElementById('step1');
const showMessage = () => {
  console.log('概要がクリックされました');
};
step1.addEventListener('click', showMessage, false);

入力し終えたら Enter（Mac は return）キーを押します。
見出しの「概要」をクリックしましょう。

次のようにコンソールに「概要がクリックされました」と表示されたら成功です。

解説

addEventListener() 関数の引数には次の情報を指定します。

第 1 引数：イベントの種類
第 2 引数：イベントハンドラーとなる関数名

「イベントの種類」では要素オブジェクトの on プロパティとして指定する方法とは異なり、イベントの種類の前には on は付けません。
第 3 引数はイベント伝搬の方式を true / false で指定します。通常は false を指定しておきましょう。

補足

addEventListener() と on プロパティの違い

いくつかの違いがありますが、大きな違いは、1 つの要素に複数のイベントを登録できるかです。
addEventListener() 関数を利用する場合、1 つの対象に対して複数の異なるイベントを設定できます。
on プロパティの場合は、1 つのイベントしか設定できません。
つまり addEventListener() 関数では追加、on プロパティは上書きということになります。

よく使うイベント一覧

JavaScript では、さまざまなイベントが用意されています。よく使うイベントとそのイベントが発生するタイミングを紹介します。

イベント	イベントハンドラー	発生するタイミング
click	onclick	クリックしたとき
change	onchange	内容が変更されたとき
mouseover	onmouseover	マウスポインタが重なったとき
load	onload	読み込みが完了したとき

click

click は、マウスクリック時の処理をするイベントハンドラーです。
たとえば、ボタンをクリックしたタイミングで処理を実行する場合に使います。

先ほどイベントの書き方でも出てきたとおりです。

1
2
3


document.getElementById('step1').onclick = () => {
  console.log('概要がクリックされました');
};

change

change は、入力欄や選択肢が変更されたときに発生するイベントです。
HTML でいうと、<input>、<select>、および <textarea> 要素に対応しています。

1
2
3


document.getElementById('text1').onchange = () => {
  console.log('text1の値が変更されました');
};

mouseover

mouseover は、マウスポインターが要素と重なったときに発生するイベントです。
たとえば、画像にマウスが重なったタイミングで処理を実行する場合に使います。

1
2
3


document.getElementById('img1').onmouseover = () => {
  console.log('img1はkintoneの画像です');
};

load

load は、読み込みが完了したときに発生するイベントです。
たとえば、ページを読み込んだタイミングで処理を実行する場合に使います。

1
2
3


window.onload = () => {
  console.log('ページが読み込まれました');
};

また画像の要素に対しても動作します。

1
2
3


document.getElementById('img1').onload = () => {
  console.log('img1が読み込まれました');
};

まとめ

ここまでイベントや、イベントの書き方について学習しました。
実際に kintone でイベントを使う場合は、kintone 独自の書き方があります。
kintone 独自の書き方については、はじめよう kintone API で学習します。
次回はライブラリについて学習しましょう。

はじめよう JavaScript