イベント処理

JavaScriptでは、クリックなどのイベント発生時に処理を実行させることができます。

本ページでは、イベント処理について説明します。

イベントとは

マウスがクリックされた、実行ボタンが押された、キーが押されたなどの発生をイベントと呼びます。JavaScriptでは、イベントが発生した時に処理をさせることができます。

例えば、ボタンがクリックされるとアラートを出すことができます。

イベントの概要

イベントは、以下の動作で処理が行われます。

イベントリスナー
イベントの発生を監視します。例えば、クリックされるなどです。
イベントハンドラー
イベントが発生した時に呼び出される処理です。例えば、アラートを表示する関数などです。

また、イベントが発生した時に処理を始めることを、発火と呼びます。

イベントリスナー

イベントリスナーは、addEventListenerで作成できます。以下は、例です。

【イベントリスナーの例】
<input type="button" id="test1" value="ボタン">

<script>
function func1() {
  alert("テスト");
}

const x = document.querySelector("#test1");
x.addEventListener("click", func1);
</script>

clickは、イベントの種類です。クリックが発生した時に発火して、関数func1(イベントハンドラー)が呼び出されます。イベントの種類については、イベントリスナー一覧をご参照ください。

func1は、コールバック関数です。このため、このままでは引数を関数に渡せません。

上記を実行すると、以下になります。

ボタンをクリックすると発火して、アラートが表示されます。

なお、同じ要素に対して同じイベント種類で、異なるイベントハンドラーを呼び出すイベントリスナーを作ることもできます。例えば、上記の例で、新たにx.addEventListener("click", func2);を追加して、func2も同時に呼び出すことができます。

イベント種類が異なっても、同じように複数作れます。

無名関数を使ったイベントリスナー

イベントリスナーは、無名関数でも記述できます。

【無名関数を使ったイベントリスナーの例】
<input type="button" id="test1" value="ボタン">

<script>
const x = document.querySelector("#test1");
x.addEventListener("click", function(){alert("テスト");});
</script>

簡単なスクリプトであれば、関数宣言せずに処理を記述できます。

また、無名関数を使うと、関数に引数を渡すこともできます。

【無名関数を使って引数を渡す方法】
<input type="button" id="test1" value="ボタン">

<script>
function func1(y) {
  alert(y);
}

const x = document.querySelector("#test1");
x.addEventListener("click", function(){func1("テスト");});
</script>

引数の"テスト"が、func1に変数yで渡されます。

this

複数のイベントリスナーから、同じイベントハンドラーを呼び出せます。この時、thisを使うと発火元の要素を特定できます。

【thisの利用例】
<input type="button" id="test1" value=10>
<input type="button" id="test2" value=20>

<script>
function func1() {
  alert(this.value);
}

const x = document.querySelector("#test1");
x.addEventListener("click", func1);
const y = document.querySelector("#test2");
y.addEventListener("click", func1);
</script>

上記は、2つのボタンがあって、どちらをクリックしても呼び出されるのはfunc1です。クリックした時にどちらのボタンをクリックしたかで、this.valueの値が変わります。

上記を実行すると、以下になります。

10のボタンをクリックするとアラートで10が表示されて、20のボタンをクリックするとアラートで20が表示されます。

これは、valueが10のボタンが押された時にthisはvalueが10の要素、20のボタンが押された時にthisは20の要素になるためです。

イベントオブジェクト

イベントオブジェクトは、イベント発生時の情報を持つオブジェクトです。イベントハンドラーで使えます。以下は、利用例です。

【イベントオブジェクトの利用例】
<input type="text" id="test1">

<script>
function func1(event) {
  alert(event.key);
}

const x = document.querySelector("#test1");
x.addEventListener("keydown", func1);
</script>

eventが、イベントオブジェクトです。event.keyによって、キーが押される(keydown)というイベントで、キーの値を返します。上記を実行すると、以下になります。

キーが押される度に、そのキーをアラートで表示します。

また、event.targetでイベントが発生したターゲットに対して、CSSプロパティの値を変更することもできます。以下は、例です。

【event.targetの利用例】
<p id="test1">event.targetの利用例</p>

<script>
function func1(event) {
  event.target.style.color = " red";
}

const x = document.querySelector("#test1");
x.addEventListener("click", func1);
</script>

実行例は、以下のとおりです。

event.targetの利用例

表示されている「event.targetの利用例」をクリックすると、テキストの色が赤に変わります。これは、colorプロパティだけでなく、さまざまなプロパティを指定して値を変えることが可能です(例えば、背景を変えるなど)。

イベントのキャンセル

イベントのキャンセルは、preventDefaultで行えます。以下は、利用例です。

【preventDefaultメソッドの利用例】
<input type="text" id="test1">

<script>
function func1(event) {
  if ( /[1-9]/.test(event.key) ) {
    event.preventDefault();
  }
}

const x = document.querySelector("#test1");
x.addEventListener("keydown", func1);
</script>

上記は、1から9の数字が入力された場合、イベントをキャンセルします。つまり、キーの入力を無効にします。

上記を実行すると、以下になります。

1から9の数字は入力できないと思います。

preventDefaultは、フォームがサブミットされた時のページのリロードへの対応としても使えます。

イベントリスナーの削除

イベントリスナーは、removeEventListenerメソッドで削除できます。以下は、利用例です。

【removeEventListenerメソッドの利用例】
<input type="button" value="一度だけ有効" id="test1">

<script>
function func1() {
  x.removeEventListener("click", func1);
  alert("イベントは削除されました");
}

const x = document.querySelector("#test1");
x.addEventListener("click", func1);
</script>

上記を実行すると、以下になります。

一度クリックすると、アラートが表示されるとともにイベントリスナーが削除されます。このため、再度クリックしてもアラートは表示されません。

removeEventListenerで指定するイベントの種類やイベントハンドラーは、addEventListenerと一致させる必要があります(この例では、"click"とfunc1部分を一致させる)。

従来のイベント処理

addEventListenerは、WindowsXPでサポートしているInternetExplorer8以前では動作しません。

InternetExplorer8以前で動作させるためには、イベントハンドラーのプロパティが使われます。以下は、例です。

【イベントハンドラーのプロパティ利用例】
<input type="button" id="test1" value="ボタン">

<script>
function func1() {
  alert("テスト");
}

const x = document.querySelector("#test1");
x.onclick = func1;
</script>

上記は、クリックするとfunc1が呼び出されてアラートが表示されます。また、以下のようにHTMLの属性としても記述できます。

【HTMLの属性でイベントハンドラーを記述する例】
<script>
function func1() {
  alert("テスト");
}
</script>

<input type="button" onclick="func1();" value="ボタン">

上記も、クリックするとfunc1が呼び出されてアラートが表示されます。どのようなイベントがあるかは、イベントハンドラ一覧をご参照ください。

これらの方法は、同じイベント種類に対して複数のイベントハンドラーを登録できません。例えば、上記でx.onclick = func2を追加すると、上書きされます。つまり、クリックした時にfunc2だけが実行されます。また、イベントの削除もできません。

汎用的に使えるのは、addEventListenerです。すでに、InternetExplorer8はサポートされていないため、今後はaddEventListenerの利用が望まれます。

特に、HTMLとJavaScriptは分離して記述することが望ましいため、HTMLの属性として記述する方法(下の方法)は推奨されていません。