onclick イベントで複数の JavaScript 関数を呼び出す方法

ユーザーが要素をクリックしたときに複数のアクションを実行するには、インライン onclick ハンドラーに複数の関数呼び出し文を入れるか、addEventListener で別々の callback を登録するか、後の呼び出しが条件に依存すべき場合に && と || を使用します。保守しやすいページコードには addEventListener を選択します。インラインハンドラーは小さい例では簡潔であり、論理演算子は条件付き呼び出しのためのものです。

インライン onclick ハンドラーから複数の関数を呼び出す

インラインハンドラーには、セミコロンで区切られた複数の JavaScript 文を含めることができます。呼び出しは順番に実行されます。これは各関数を呼び出すものであり、関数の値を属性に渡すものではありません。

この例を実行します。

function saveDraft() {
  console.log("Draft saved");
}

function showConfirmation() {
  console.log("Confirmation shown");
}

function handleClick() {
  saveDraft();
  showConfirmation();
}

handleClick();

この単独の例は文の順序を示しています。ページでは、同じ呼び出しをボタンのインラインハンドラーに配置できます。

<button type="button" onclick="saveDraft(); showConfirmation();">Save</button>

要素はページに存在しなければならず、名前付きの両方の関数がクリック時に利用可能でなければなりません。呼び出しがキャッチされない例外をスローすると、その同じハンドラー内の後の文は実行されません。次のアクションを依然として実行する必要がある場合は、関数内でエラーを処理します。

addEventListener で複数のクリックハンドラーを登録する

ページコードについては、各 callback を個別に登録します。ブラウザは登録順にクリックのリスナーを呼び出します。リスナーが例外をスローすると、イベントのディスパッチはそのエラーを報告しますが、登録された他のリスナーは引き続きディスパッチされます。別々のリスナーは、ある callback の非同期作業が別の callback の開始前に完了することを約束するものではありません。

<button id="save" type="button">Save</button>
<script>
  const button = document.getElementById("save");

  function saveDraft() {
    console.log("Draft saved");
  }

  function showConfirmation() {
    console.log("Confirmation shown");
  }

  button.addEventListener("click", saveDraft);
  button.addEventListener("click", showConfirmation);

  // To remove a listener later, use the same callback reference:
  button.removeEventListener("click", showConfirmation);
</script>

removeEventListener には、登録に使用したのと同じイベントタイプ、同じ callback 関数オブジェクト、同じキャプチャ設定が必要です。匿名関数を登録してその参照を保持しない場合、後でその同じ関数オブジェクトを渡して削除することはできません。HTML はボタンを表示したままにし、JavaScript はページスクリプト内にあります。このブラウザの例はコンソール出力の例ではありません。

条件付き呼び出しに && と || を使用する

論理演算子は短絡評価を行います。&& は左側が真の場合にのみ右側を評価し、|| は左側が偽の場合にのみ右側を評価します。これは、2 番目のアクションがその条件の下でのみ実行されるべき場合に便利ですが、複数のイベントリスナーを登録するものではありません。

function isValidPage(pageNumber) {
  return Number.isInteger(pageNumber) && pageNumber >= 1 && pageNumber <= 10;
}

function fetchPageDetails(pageNumber) {
  console.log(`Loading page ${pageNumber}`);
}

const pageNumber = 3;
isValidPage(pageNumber) && fetchPageDetails(pageNumber);

ここでは、fetchPageDetails は isValidPage が真の値を返す場合にのみ実行されます。|| を使うと、最初の式が偽の場合にフォールバック呼び出しを実行できます。たとえば hasSavedValue() || loadDefaultValue() です。意図的な条件付き実行には && と || を使用し、登録されたすべての callback がクリックに応答すべき場合は別々のリスナーを使用します。