1. はじめに
本記事では、JavaScriptのイベント処理についてをまとめていきます。
JavaScriptのイベント処理には3種類の書き方があります。それぞれの特徴を整理し、どのような場面でどのような記述方法を用いることが適切かを判断できるようになれればと思います。
2. イベント処理の種類
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Hello</title>
<style>
button {
margin: 10px;
}
</style>
</head>
<body>
<button>click</button>
<script>
/* JavaScript 記載箇所 */
</script>
</body>
</html>
上記のHTMLファイルを例として説明していきます。
実現したい処理としては、<button>click</button>をクリックすることで「Hello」と画面に表示させたいです。
2-1. イベントハンドラープロパティ
const btn = document.querySelector("button");
btn.onclick = () => {
alert('Hello');
}
１つ目は、イベントハンドラープロパティを使用する方法です。イベントハンドラープロパティとは、上記のコードでいうonclickのことです。
要素オブジェクト(btn)のプロバティ(onclickプロパティ)に、処理内容を代入することでイベント処理を実現しています。
この記述方法は、ブラウザ間の互換性が高く、IE8でも動かすことができます。しかし、各イベントに対して1つの関数しか割り当てることができないという弱みがあり、複数の関数を処理させたい場合には不向きです。
2-2. イベントリスナー
const btn = document.querySelector("button");
btn.addEventListener("click", () => {
alert('Hello');
});
２つ目は、イベントリスナーを使用する方法です。具体的には、要素オブジェクトのaddEventListener()関数を使用します。
addEventListener関数は、addEventListener(イベントの種類, 処理内容, イベントの伝播方法)というように記述することができます。
今回の場合だと、第１引数にclick、第２引数に「Hello」と表示させる処理を記載することでイベント処理を実現しています。
※第３引数は特別なことがない限り、false or 省略で問題ございません。
この記述方法は、イベントハンドラープロパティとは異なり、各イベントに複数の関数を処理させることが可能なため、より柔軟な処理を可能にします。しかし、IE9以降でのサポートとなるため、動作環境を意識する必要がございます。
2-3. インラインイベントハンドラー
/* buttonタグにonclick属性を追記 */
<button onclick="alertHello()">click</button>
function alertHello() {
alert('Hello');
}
３つ目は、インラインイベントハンドラーを使用する方法です。インラインイベントハンドラーとは、上記のコードで言うHTMLに記載したonclick属性のことです。属性値として処理内容を記載することで、イベント処理を実現しています。
HTMLとJavaScriptが混在しているため、この記述方法は推奨されていません。上記コードのような単純なプログラムであれば問題ございませんが、大規模な開発となった場合、管理が大変となり保守性が欠けてしまします。
3. まとめ
基本的にはイベントリスナーを使用し、環境に合わせてイベントハンドラプロパティに変更するという記述方法が良いと感じました。
イベントリスナーには、addEventListener関数に加え
removeEventListener関数もあるため、非常に拡張性があると言えるでしょう。