Onclick イベントで複数の JavaScript 関数を呼び出す

  2. プログラミングのヒント
  3. JavaScript ハウツー
  4. Onclick イベントで複数の JavaScript 関数を呼び出す
Nithin Krishnan 2023年10月12日
JavaScript JavaScript Event
  1. 関数を値として onclick パラメータに渡す
  2. 控えめな JavaScript の使用
  3. &&と||を使用する演算子
Onclick イベントで複数の JavaScript 関数を呼び出す

私たちは、JavaScript の onclick イベントに精通しています。このイベントは、onclick 属性に値として渡される特定の関数をトリガーします。HTML の Document Object Model（DOM）イベントは、<br>、<head>、<html>、<iframe>、<などのいくつかを除くほとんどすべての HTML 要素でサポートされています。meta>、<param>、<script>、<style> または <title>。これは、<div>、<button>、<li>、<span>、<a> などの html タグで一般的に使用されます。<div>、<li> または <button> をクリックします。以下はそのためのいくつかの方法です。

  • 関数を値として onclick パラメータに渡す
  • 控えめな JavaScript の使用
  • &&と||を使用する演算子

関数を値として onclick パラメータに渡す

onclick 属性を使用する最も一般的な方法は、関数を値として onclick に割り当てることです。通常、HTML タグ内の GUI コードで記述します。複数の関数を値として渡すには、そのタグの onclick 属性にセミコロンで区切ってリストします。構文は次のとおりです。

onclick = 'functionA(); functionB();'

両方の機能が次々に実行されます。たとえば、次のコードを関数 functionA() および functionB() とともに使用すると、結果は、値に記載されている順序で 2つの関数を順番に実行します。

<div id="output" onclick="functionA(); functionB();"></div>

function functionA() {
  for (let i = 0; i < 5; i++) {
    console.log(i + ' Mars is a planet');
  }
}
function functionB() {
  for (let i = 0; i < 5; i++) {
    console.log(i + ' The sky is blue');
  }
}

Ouput：

0 Mars is a planet
1 Mars is a planet
2 Mars is a planet
3 Mars is a planet
4 Mars is a planet
0 The sky is blue
1 The sky is blue
2 The sky is blue
3 The sky is blue
4 The sky is blue

備考

  • onclick を使用した複数の関数の実行は、すべての Web ブラウザーおよびほとんどの HTML 要素でサポートされています。これは、複数の関数を呼び出すための簡潔で簡潔な方法です。
  • 関数の実行は順次です。したがって、それに応じて関数をリストすることにより、メソッド呼び出しが行われる順序を計画できます。
  • 1つの関数名の後にセミコロンを使用する代わりに、コンマで区切ることもできます。これは、onclick = "function1(), function2()"も有効な構文であることを意味します。
  • onclick イベントに渡される複数の関数を使用することには欠点があります。パラメータとして渡されたメソッドのいずれかが何らかの例外のために失敗した場合、チェーン全体が切断されます。そして、それに続くすべての機能が実行されるわけではありません。
  • タグで onclick を使用すると、コードが読みやすくなります。DOM は操作されません。これは、HTML で関数を静的に指定することを意味します。したがって、実行時に DOM 要素の onclick イベントに関数を追加することはありません。ブラウザは HTML を解析し、解析フェーズでクリックイベントを関連付けることができます。

控えめな JavaScript の使用

JavaScript の onclick で関数を渡す別の方法は、JavaScript コードで onclick リスナーを追加することです。このメソッドでは、ターゲット要素を見つけて、その要素の onclick イベントに関数をリンクします。目立たないアプローチは、JavaScript イベントを js コードに保持するプログラミング方法であり、HTML には静的ページのみが含まれます（詳細についてはここを参照）。以下は、クリックイベントで複数の関数を呼び出す邪魔にならない方法です。

let element = document.getElementById('output');
element.addEventListener('click', functionA);
element.addEventListener('click', functionB);

出力：

0 Mars is a planet
1 Mars is a planet
2 Mars is a planet
3 Mars is a planet
4 Mars is a planet
0 The sky is blue
1 The sky is blue
2 The sky is blue
3 The sky is blue
4 The sky is blue

備考

  • 関数は順番に実行されますが、依存していません。したがって、関数の実行に失敗しても、onclick="functionA(), functionB()"の場合とは異なり、残りの関数はブロックされません。
  • この方法で複数の関数を追加できます。すでに追加されている関数を動的に削除するには、removeEventListener を使用する必要があります。構文は次のとおりです。
element.removeEventListener('click', alertFirst);
  • HTML は、HTML 要素の onclick にリンクされた関数を表示しないため、機能をデバッグするのは困難です。メソッドは、JavaScript コードのコンパイル中に、実行時に onclick イベントにマップされます。
  • 実行時に onclick を追加するこの方法は、実行時のコンパイルフェーズで関連付けが行われるため、ビジネスロジックに基づいて機能をスマートに実行する柔軟性を提供します。

&&と||を使用する演算子

&&と||で区切られた複数の関数を含めることができます演算子。関数はブール値の戻り型を持つ必要があります。通常、このアプローチは、いくつかの条件を決定してから目的の機能を実行する必要がある場合に使用します。これらの条件で複雑または長い論理チェックが必要な場合は、それらを関数として作成し、js コード内に保持して、HTML を無駄のない読みやすいものにすることをお勧めします。次のコードは、使用法について詳しく説明しています。

<div id="output" onclick="isValidPage(pageNum) && fetchPageDetails(pageNum)"></div>

function isValidPage(pageNumber) {
  let pageNum = parseInt(pageNumber);
  let maxPagesCount = 10;
  let isValidPageNumber = false;
  if (!isNaN(pageNum)) {
    if (pageNum > 1 && pageNum < maxPagesCount) {
      isValidPageNumber = true;
    }
  }
  return isValidPageNumber;
}

function fetchPageDetails(pageNumber) {
  // Call Backend service to get the detils
}

上記のコードでは、fetchPageDetails() 関数は、isValidPage() 関数が true を返した後にのみ呼び出されます。本質的に、&&演算子は、pagenumber が有効な場合にのみ fetchPageDetails() 関数が実行されることを確認します。

備考

  • この方法では、関数の実行は順次です。これは、&&と||を使用したコードとしてのロジックに従います。演算子。例外が原因でメソッドが失敗した場合、残りの関数は実行されません。
  • このメソッドは、ブール値の戻り型またはコードで使用されている論理演算子と一致する型を持つ関数がある場合に使用できます。
  • HTML 要素の click 属性で関数を指定するため、このメソッドは複数の関数を宣言する静的な方法です。実行時の関連付けは行いません。

関連記事 - JavaScript Event