JavaScript | イベントの複数指定と上書きをする方法

2022-02-06JavaScript イベント,JavaScript

JavaScript | イベントの複数指定と上書きをする方法

addEventListener()を使ってイベントを複数指定する方法と、イベントの上書きをする方法を紹介しています。

イベントを複数指定する

JavascriptのaddEventListener()は同じ種類のイベントを追記した場合は、殆どのケースで上書きされる訳ではなくイベントの追加という処理が行われます。

例えば、同じイベントの種類を指定していて、処理内容がCSSのスタイルを適用する処理内容だった場合は見た目は最後に追加したイベントの結果になりますが、その要素に定義した全てのイベントを順番に実行している事になります。

複数のイベントを指定したい場合は、addEventListener()を追加して指定していきます。

複数の関数を定義した場合、イベントを作成した順番で実行されます。

let click_event_func_1 = () => {
  console.log('1');
};

let click_event_func_2 = () => {
  console.log('2');
};

document.querySelector(`.item`).addEventListener('click', click_event_func_1, false);
document.querySelector(`.item`).addEventListener('click', click_event_func_2, false);

// 1
// 2

無名関数を利用した場合も同様に、同じ種類のイベントであってもイベントを作成した順番で全て実行します。

document.querySelector(`.item`).addEventListener(`click`, () => {
  console.log('1');
});

document.querySelector(`.item`).addEventListener(`click`, () => {
  console.log('2');
});

// 1
// 2

同じ関数を定義した場合は、上記のふたつと違って重複してイベントが発行される事はありません。

同じイベント処理を複数回実行したい場合に、このようにコードを書くことはあまり考えられませんが一応注意が必要です。

let click_event_func_1 = () => {
  console.log('1');
};

document.querySelector(`.item`).addEventListener('click', click_event_func_1, false);
document.querySelector(`.item`).addEventListener('click', click_event_func_1, false);

// 1

イベントを上書きする

addEventListener()で指定したイベントを違うイベントに上書きしたい場合は、removeEventListener()を使って不要なイベントを削除する事で実装可能です。

関連：JavaScript | 作成・追加したイベントを削除する方法 | ONE NOTES

let click_event_func_1 = () => {
  console.log('1');
};

let click_event_func_2 = () => {
  console.log('2');
};

document.querySelector(`.item`).addEventListener('click', click_event_func_1, false);
document.querySelector(`.item`).removeEventListener('click', click_event_func_1, false);
document.querySelector(`.item`).addEventListener('click', click_event_func_2, false);

// 2

上書きというより、指定したイベントを削除しているだけですので、removeEventListener()を記述する場所は順番にならなくても問題ありません。

また、イベントを定義しなおす事で実行する順番を入れ替える事も可能です。

let click_event_func_1 = () => {
  console.log('1');
};

let click_event_func_2 = () => {
  console.log('2');
};

document.querySelector(`.item`).addEventListener('click', click_event_func_1, false);
document.querySelector(`.item`).addEventListener('click', click_event_func_2, false);

document.querySelector(`.item`).removeEventListener('click', click_event_func_1, false);

// 2

無名関数でイベント処理を指定している場合、removeEventListener()は効きませんので、この方法でイベントを上書きする事はできません。

document.querySelector(`.item`).addEventListener(`click`, () => {
  console.log('1');
});

document.querySelector(`.item`).addEventListener(`click`, () => {
  console.log('2');
});

// removeEventListener()は無名関数には効かない
document.querySelector(`.item`).removeEventListener(`click`, () => {
  console.log('1');
});

document.querySelector(`.item`).removeEventListener(`click`, () => {
  console.log('2');
});

// 1
// 2

JavaScript イベント,JavaScript

Posted by Yousuke.U