In 'n' Out

イベントとは

イベントとは、ユーザーの操作やページの変化によって発生する出来事のことです。
例えば、クリックされたことを検知する仕組みとして、ブラウザはclickというイベントを用意しています。
ただし、イベントは発生するだけでは何も処理は行われません。
イベントが発生したときに実行する処理を登録する必要があります。
イベントに対して処理を登録することをイベントリスナーと言います。
また、イベントが発生したときに実行される処理（関数）のことをイベントハンドラと言います。
イベントの登録方法には、addEventListenerを使う方法のほかに、onclickのように要素やwindowオブジェクトのプロパティとして設定する方法もあります。

addEventListener

要素に対して、特定のイベントが発生したときの処理を登録します。

基本構文

要素.addEventListener('イベント名', 関数);

addEventListenerはメソッドで、要素に対して特定のイベントが発生したときに、実行する処理（関数）を登録します。
イベントには、ユーザーの操作やページの状態変化など、処理を実行するきっかけになるものを指します。
どのイベントを使うかによって、処理が実行されるタイミングが変わります。
clickイベントは最も基本的で、動作確認もしやすいため、clickイベントを書いていきます。

click

clickイベントは、要素がクリックされたときに発生し、ボタン操作や表示の切り替えなど、ユーザーの明示的な操作に反応させたい場合によく使われます。

<p id="changeText">変わる前のテキスト</p>

//normalEvent.js
const text = document.getElementById('changeText');

text.addEventListener('click', () => {
    text.style.color = 'red';
    text.style.fontWeight = 'bold';
    text.textContent = 'テキストを変更しました';
});

動作例

実行ボタンを押すと挙動確認ができます。
今回はテキストであるp要素にclickイベントを発生するように登録しました。
その後テキストをクリックすると文字色、太さ、テキスト内容を書き換えるようにしました。
このようにbutton要素だけでなく、リンク（a要素）や画像、divなど、さまざまな要素にclickイベントを設定できます。

イベントオブジェクト

イベントが発生すると、その情報は関数に自動的に渡されます。
このとき受け取ることができるのがイベントオブジェクトです。
イベントオブジェクトには、どの要素でイベントが発生したのか、どの種類のイベントなのかといった情報がまとめられています。
これらの情報を利用することで、ユーザーの操作に応じた柔軟な処理が可能になります。

構文

要素.addEventListener('イベント名', (任意の引数名) => {
    処理;
});

// 処理の中で使用
任意の引数名.target

イベントが発生すると、関数の引数としてイベントオブジェクトが自動的に渡されます。
関数の引数として受け取ったイベントオブジェクトに対して、targetを使うことで、イベントが発生した要素を取得できます。
なお、引数名は任意ですが、eやeventとすることが多いです。
それでは先ほどのclickイベントをイベントオブジェクトに書き換えてみます。

コード例

//eventObject.js
const text = document.getElementById('changeTextE');

text.addEventListener('click', (e) => {
    e.target.style.color = 'red';
    e.target.style.fontWeight = 'bold';
    e.target.textContent = 'テキストを変更しました';
});

動作例

clickEventで実行されたものと同じ挙動をします。
では、何が違うのでしょうか。
イベントオブジェクトを使用していない場合は、あらかじめ取得した要素pを直接使用しています。
一方で、イベントオブジェクトを使用した場合は、e.targetを通して、実際にイベントが発生した要素を取得しています。
このようにe.targetを使うことで、どの要素でイベントが発生したのかを判別できるため、複数の要素に同じイベントを登録した場合でも、柔軟に処理を制御することができます。

removeEventListener

要素に対して、特定のイベントが発生したときの処理を削除します。

構文

要素.removeEventListener('イベント名', 関数);

removeEventListenerはメソッドで、addEventListenerで登録したイベントを削除します。
そのため、事前にイベントが登録されている必要があります。
また、removeEventListenerでイベントを削除するには、addEventListenerで登録した関数と同じ関数を指定する必要があります。
そのため、無名関数では削除できず、あらかじめ関数を定義しておく必要があります。
それでは削除するコードを書いていきます。

コード例

<p id="changeTextAR">0回クリック</p>

//removeEvent.js
const text = document.getElementById('changeTextAR');

let count = 0;

function handler() {
    count++;
    text.textContent = count + '回クリック';
}

function eventAdd() {
    text.removeEventListener('click', handler);
    text.addEventListener('click', handler);
}

function eventRemove() {
    text.removeEventListener('click', handler);
}

動作例

実行ボタンを押すことで、テキストのクリック回数がリアルタイムで反映されます。
textという定数に対象となるテキスト要素を取得し、countという変数に0を代入しておきます。
handler関数が呼ばれると、countがインクリメントされ、クリック回数がtextの内容に反映されます。
ここまでが準備段階です。
次にeventAdd関数を実行することで、一度removeEventListenerが呼ばれて削除します。
その後addEventListenerでhandler関数を呼び出し実行します。
これは再度実行する際に削除していないと重複してイベントが登録されるためです。
最後にeventRemove関数を実行するとテキストに登録されていたイベントが削除されます。
これによりテキストをクリックしても回数は増えません。

イベントを削除する機会はそれほど多くないかもしれません。
しかし、モーダルウインドウやポップアップを閉じるときや、一度だけ処理を行いたい場合、フォームの状態に応じてイベントを無効化したい場合などに使用されます。
イベントは追加するだけでなく、不要になったときに削除しないと、意図しない動作が残ってしまうことがあります。
そのため、イベントの削除についてもあわせて理解しておきましょう。