JavaScript でクリックイベントをトリガーする

1. JavaScript で click() を使用してクリックイベントをトリガーする
2. JavaScript で addEventListener() を使用してクリックイベントをトリガーする

ウィンドウオブジェクトは、ブラウザとの通信に使用される最も重要なオブジェクトの 1つです。ブラウザのウィンドウを表します。すべてのグローバル変数と関数がウィンドウオブジェクトのメンバーになります。Window-Location オブジェクトは、現在のページの URL を取得し、リダイレクトの URL を変更するために使用されます。

今日の記事は、JavaScript でクリックイベントをトリガーする方法を示しています。

JavaScript で click() を使用してクリックイベントをトリガーする

これは、JavaScript によって提供される組み込みイベントです。要素が押されるとクリックイベントを受け取り、ポインタが要素内にあるときにポインティングデバイス（たとえば、マウスの左ボタン）でキーが離されます。

click() は、マウスの上下のイベントがこの順序でトリガーされた後にトリガーされます。click 関数の詳細については、メソッド click() のドキュメントを参照してください。

<button type="button" id="btn" onclick="openGoogleByMethod()">Open Google</button>

const link = document.getElementById('btn');
for (let i = 0; i < 5; i++) {
  link.click();
}
function openGoogleByMethod() {
  console.log('Event triggered')
}

上記の例の要素 ID を使用して要素を抽出し、Click イベントを要素に適用します。自動クリックイベントを複数回実行する場合は、for ループを記述して、for ループ内で target.click() を呼び出すことができます。カウンターが最大値に達するまでボタンのクリックを自動的に呼び出し、Triggered event を 5 回出力します。

出力：

"Event triggered"
"Event triggered"
"Event triggered"
"Event triggered"
"Event triggered"

JavaScript で addEventListener() を使用してクリックイベントをトリガーする

これは、JavaScript イベントターゲットインターフェイスによって提供される不可欠なメソッドです。このメソッドは、イベントリスナーを登録します。指定されたイベントがターゲットでキャッチされるたびに、構成された関数が呼び出されます。

構文

target.addEventListener($type, $listener);
target.addEventListener($type, $listener, $options);
target.addEventListener($type, $listener, $useCapture);

• $type は、監視するイベントのタイプを示す文字列のみを受け入れる必須パラメーターです。大文字と小文字を区別するパラメータです。click、keyboard、input、database などのさまざまなイベントをサポートします。$listener は必須パラメーターです。指定されたタイプのイベントが発生すると、オブジェクトとしてのこのパラメーターはそれに関する通知を受け取ります。このオブジェクトは、EventListener インターフェースまたは JavaScript 関数を実装する必要があります。
• $options はオプションのパラメータです。このパラメーターは、イベントリスナーのプロパティを指定します。一部のプロパティは、capture、once、passive、および signal です。$useCapture はオプションのパラメータです。このパラメーターはブール値を受け入れます。このタイプのイベントは、最初に DOM ツリーの最下部にある EventTarget に送信されるかどうかは、このブール値によって決定されます。true の場合、このイベントは最初に登録済みリスナーに送信され、次に EventTarget に送信されます。

addEventListener 関数の詳細については、メソッド addEventListener() のドキュメントを参照してください。

<button type="button" id="btn" onclick="openGoogleByMethod()">Open Google</button>

const link = document.getElementById('btn');
link.addEventListener('click', e => {});
for (let i = 0; i < 5; i++) {
  link.dispatchEvent(new Event('click'));
}
function openGoogleByMethod() {
  console.log('Event triggered')
}

上記の例では、要素 ID を使用して要素を抽出し、要素の Click イベントのリスターを追加します。自動クリックイベントを複数回実行する場合は、for ループを入力して、for ループ内に target.DispatchEvent (new Event('click')) メソッドを入力できます。dispatchEvent は、イベントオブジェクトの後にイベントリスナーをディスパッチする EventTarget メソッドです。これにより、カウンターが最大値に達するまでボタンクリックイベントが自動的に送信され、Triggered Event が 5 回出力されます。

出力：

"Event triggered"
"Event triggered"
"Event triggered"
"Event triggered"
"Event triggered"