イベント処理

イベントとは

マウスがクリックされた、実行ボタンが押された、キーが押されたなどの発生をイベントと呼びます。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を使うと発火元の要素を特定できます。

<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プロパティの値を変更することもできます。以下は、例です。

<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の利用例」をクリックすると、テキストの色が赤に変わります。これは、colorプロパティだけでなく、さまざまなプロパティを指定して値を変えることが可能です(例えば、背景を変えるなど)。

イベントのキャンセル

イベントのキャンセルは、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メソッドで削除できます。以下は、利用例です。

<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の属性としても記述できます。

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

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

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

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

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

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