ReactとJavaScriptの文法 ~ イベントハンドラの設定

2018年11月12日

Reactの公式ドキュメントでGetting Startedを読むと、このような文章があります。

We recommend going through this JavaScript overview to check your knowledge level. It will take you between 30 minutes and an hour but you will feel more confident learning React.

意訳をすると「Reactを習得したかったら、JavaScriptも並行して学習してね！」と言ったところでしょうか？そういうわけなのでReactの学習を意識しつつ、JavaScriptの学習も進めていきましょう。今回はイベントハンドラの設定についてご紹介します。

JavaScriptにおけるイベントハンドラの登録

イベントハンドラの「イベント」とは、ユーザーがボタンをクリックしたなど、端末装置やアプリケーションで発生した事象のことを指します。イベントハンドラとは、イベントが発生したときに実行される関数のことをいいます。JavaScriptではイベントハンドラを登録する方法として、以下の3つの方法があります。

1. HTML要素の属性に設定する

[php]
<button onclick="activateLasers()">Activate Lasers</button>
<script>
function activateLasers() {
alert(‘Hello World’);
}
</script>
[/php]

HTML要素にイベントハンドラ属性を設定して、その要素のイベントハンドラ（onclick）を登録します。ここでイベントハンドラを登録している箇所は、’onclick=”activateLasers()”‘の部分です。「button要素をクリックするとイベントとしてactivateLasers()関数が発生する」という意味になります。

2. DOM要素のプロパティに設定する

[php]
<button value="activateLasers" id="button">Activate Lasers</button>
<script>
function activateLasers() {
alert(‘Hello World’);
}
window.onload = function() {
var btn = document.getElementById("button");
btn.onclick = activateLasers;
}
</script>
[/php]

Windowオブジェクトの1つ下に位置するonloadプロパティに、イベントハンドラ（onclick）を登録した関数を代入します。イベントハンドラをDOM要素のプロパティに設定する方法は、HTML要素の属性に設定すると異なり、HTMLとJavaScriptを分離してコードを見やすくするという利点があります。

3. addEventListnerメソッドの使用する

[php]
<button value="activateLasers" id="button">Activate Lasers</button>
<script>
var btn = document.getElementById("button");
btn.addEventListener(‘click’, function() {
alert(‘Hello World’);
});
</script>
[/php]

addEventListenerメソッドでイベントリスナを登録します。イベントリスナとはaddEventListenerメソッドの第二引数で使われている無名関数のことで、第一引数で登録されているイベント(‘click’)が発生したときに処理する内容が定義されています。こちらも2のときと同じく、HTMLとJavaScriptを分離してコードを見やすくするという利点があります。