関数に引数を渡す場合のイベントハンドラ

addEventListenerでイベントハンドラに引数を渡したい場合、関数を直接実行してしまうと即時実行されるため、イベント発生前に処理が完了してしまう。
そのため、無名関数やアロー関数を使ってイベントが発生したときに初めて関数を実行されるようにする必要がある。

関数を直接実行する例

const button = document.querySelector('.js-button');
const message = document.querySelector('.js-message');

/**
 * 関数を定義
 * @param {string} text - 表示するテキスト
 */
function showMessage(text) {
  message.textContent = text;
}

/**
 * 関数がすぐに実行されてしまい、クリックイベントが正しく動作しない。
 * ページを読み込んだ時点で引数に渡した値がテキストとして表示されてしまう。
 * @example
 */
button.addEventListener('click', showMessage("Hello!"));  

addEventListenerの引数にshowMessage("Hello!") として関数を渡しているため、クリックイベントを待たずに関数が即座に実行される。
その結果、ページ読み込み時にすぐに "Hello!" が表示されてしまう。

関数の参照を渡してイベントが発生したときに実行する例

const button = document.querySelector('.js-button');
const message = document.querySelector('.js-message');

/**
 * 関数を定義
 * @param {string} text - 表示するテキスト
 */
function showMessage(text) {
  message.textContent = text;
}

/**
 * 関数の参照を渡すことで、クリック時にのみ関数が実行される。
 * 無名関数やアロー関数を使って、引数付きの関数を実行できるようにする。
 * @example
 */
button.addEventListener('click', () => showMessage("Hello!"));

アロー関数を使ってshowMessageに引数を渡している。
この方法により、クリックイベントが発生した際に初めて関数が実行されるようになる。