jQuery.trigger() 関数の使用方法のチュートリアル

trigger() 関数は、一致する各要素で指定されたタイプのイベントをトリガーするために使用されます。

さらに、イベントがトリガーされたときに、イベント処理関数に追加のパラメーターを渡すこともできます。

この関数を使用すると、要素にバインドされたイベント処理関数の実行を手動でトリガーでき、また要素のデフォルトの動作の実行もトリガーされます。

フォーム要素

を例に挙げると、trigger("submit") を使用すると、フォームにバインドされた送信イベントをトリガーし、フォーム送信イベントのデフォルトの動作であるフォーム送信操作も実行できます。

ネチズン @Feiyang からのフィードバックによると、リンク タグ のトリガー (「クリック」) は特殊なケースであり、リンク クリック イベントのデフォルトの動作 (対応するリンクにジャンプする操作) はトリガーされません。関連する詳細を表示するには、ここをクリックしてください。

jQuery 1.3 以降、trigger() 関数によってトリガーされるイベントは、バブリングして DOM ツリーに渡すことができるイベント バブリングもサポートします。

この関数はjQueryオブジェクト(インスタンス)に属します。

構文

trigger() 関数には主に次の 2 つの使用形式があります:

使用方法 1:

jQueryObject.trigger(events [, extraArguments])

一致する各要素イベントで指定されたタイプ (イベント) をトリガーします。また、追加のパラメーター (extraArguments) をイベント処理関数に渡すことができます。

使用法 2: jQuery 1.3 では、この使用法が新たにサポートされました。

jQueryObject.trigger(eventObject [, extraArguments ] )

は、指定されたイベント処理関数によって渡される Event オブジェクト (eventObject) です。これは、対応するイベント処理関数の実行をトリガーするために使用され、追加のパラメーターを渡すことができます。イベント処理関数 (extraArguments) に渡します。

パラメータ

パラメータの説明

events 文字列型は、イベントのタイプとオプションの名前空間 (「click」、「focus」、「keydown.myPlugin」など) を指定します。

extraArguments オプション/オブジェクト型は、イベント処理関数によって渡される追加のパラメーターです。複数のパラメータを渡したい場合は、配列として渡してください。

eventObject オブジェクト タイプは Event オブジェクトで、オブジェクトに渡されるイベント処理関数をトリガーするために使用されます。

trigger() 関数は、実行をトリガーするイベント処理関数のデフォルト パラメーター、つまり現在のイベントを表す Event オブジェクトを渡します。

パラメータ extraArguments は、イベント処理関数にさらに追加のパラメータを渡すために使用されます。 extraArguments が配列形式の場合、各要素は 関数の引数 として機能します。

戻り値

trigger()関数の戻り値はjQuery型で、現在のjQueryオブジェクトそのものを返します。

例と説明

次の初期 HTML コードを参照してください:

<input id="btn1" type="button" value="点击1" />
<input id="btn2" type="button" value="点击2" />
<a id="a1" href="#">CodePlayer</a>
<div id="log"></div>

まず、イベントを上記のボタンと 要素にバインドし、trigger() 関数を使用してイベントを直接トリガーします。対応するコードは次のとおりです:

var $log = $("#log");
function handler( event, arg1, arg2 ){
    var html = &#39;<br>触发元素#&#39; + this.id + &#39;的[&#39; + event.type +&#39;]事件，额外的函数参数为:&#39; + arg1 + &#39;, &#39; + arg2;
    $log.append( html );
}
var $buttons = $(":button");
// 为所有button元素的click事件绑定事件处理函数
$buttons.bind( "click", handler );
// 为所有a元素的click、mouseover、mouseleave事件绑定事件处理函数
$("a").bind( "click mouseover mouseleave", handler );
// 触发所有button的click事件
$buttons.trigger("click"); 
/*(追加文本)
触发元素#btn1的[click]事件，额外的函数参数为:undefined, undefined
触发元素#btn2的[click]事件，额外的函数参数为:undefined, undefined
*/
$("#btn1").trigger("click", "CodePlayer");
/*(追加文本)
触发元素#btn1的[click]事件，额外的函数参数为:CodePlayer, undefined
*/
// arg1 = "张三"， arg2 = 20
$("a").trigger("mouseover", ["张三", 20 ] );
/*(追加文本)
触发元素#a1的[mouseover]事件，额外的函数参数为:张三, 20
*/
$("a").trigger("mouseleave", { name: "张三", age: 18 } );
/*(追加文本)
触发元素#a1的[mouseleave]事件，额外的函数参数为:[object Object], undefined
*/
trigger()函数还可以根据传入事件处理函数的Event对象，来触发对应的事件。
var $btn1 = $("#btn1");
// 为btn1元素的click事件绑定事件处理函数
$btn1.bind( "click", function(event){
    alert("click1");    
});
// 为btn1元素的click事件绑定事件处理函数
// 如果传入了一个有效的额外参数，则再次触发click
$btn1.bind( "click", function(event, arg1){
    alert("click2");
    if(arg1)
        $(this).trigger( event );
});
// $btn1.trigger( "click" ); // 调用一次click1、调用一次click2
$btn1.trigger( "click", true ); // 调用两次click1、调用两次click2

さらに、trigger() 関数は、指定された名前空間を含むイベントのみをトリガーすることもできます (名前空間は 1.4.3 以降でのみサポートされます)。

りー

以上がjQuery.trigger() 関数の使用方法のチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。