jQuery トリガークリック

今日の記事では、jQuery のトリガークリックイベントについて説明します。

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

jQuery は、指定されたイベントタイプの一致するアイテムにアタッチされたハンドラーと動作を実行するトリガーメソッドを提供します。

構文：

.trigger( eventType [, extraParameters ] )

1. eventType は、クリックや送信などの JavaScript イベントタイプを含む文字列です。
2. extraParameters は、イベントハンドラーに渡す追加のパラメーターです。

.on() またはそのショートカット手法の 1つに関連付けられているイベントハンドラーは、対応するイベントが発生している間に沈殿します。ただし、.trigger() メソッドを使用して手動でトリガーできます。

.trigger() の呼び出しは、イベントがユーザーを介して確実にトリガーされた場合と同じ順序でハンドラーを実行します。

jQuery 1.3 以降、.trigger() イベントが DOM ツリーに表示されます。イベントハンドラーは、ハンドラーから false を返すか、イベントに超過したイベントオブジェクトに対して .stopPropagation() アプローチを呼び出すことにより、バブリングを防ぐことができます。 .trigger() は、合成されたイベントオブジェクトを使用してイベントのアクティブ化全体をシミュレートしますが、確実に進行中のイベントを完全に複製することはできません。

イベントオブジェクトは、常に最初のパラメータとしてイベントハンドラに渡されます。引数の配列を .trigger() 呼び出しに渡すこともでき、イベントオブジェクトに適切に従うように、これらのパラメーターをハンドラーに渡すことができます。

jQuery 1.6.2 以降、単一の文字列または数値引数を、配列で囲むことなく渡すことができます。

.trigger() 手法は、Pub/Sub メカニズムに似た単純な JavaScript オブジェクトをラップする jQuery コレクションで使用できます。イベントが発生すると、オブジェクトの任意のイベントハンドラーが呼び出される可能性があります。

次の例でそれを理解しましょう。

<a onclick="doSomething()">Google</a>
<button type="button" id="trigger-btn">Trigger</button>

$('#trigger-btn').click(function(){
console.log("triggering")
  $("a").trigger("click");
});

function doSomething(){
    alert("Click event is triggered on the link.");
}

上記の例では、ユーザーに通知するクリック機能を定義しました。特定のリンクで href 属性を渡すことができます。

別の要素がこのクリックをトリガーする例を見てみましょう。この例では、クリックをトリガーするトリガーボタンを定義しました。

jQuery をサポートする任意のブラウザーで上記のコードスニペットを実行してみてください。以下の結果が表示されます。

出力：

デモ