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

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

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

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

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

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

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

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

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

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

1
2
3

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

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

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

解説

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

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

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

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

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

1
2
3
4
5

const overview = document.getElementById('overview');
const showMessage = () => {
  console.log('概要がクリックされました');
};
overview.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は、マウスクリック時の処理をするイベントハンドラーです。
たとえば、ボタンをクリックしたタイミングで処理を実行する場合に使います。

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

1
2
3

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

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

1
2
3

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

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

1
2
3

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

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

1
2
3

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

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

1
2
3

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

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