Tutorial zur Verwendung der jQuery.trigger()-Funktion

Die Funktion

trigger() wird verwendet, um ein Ereignis des angegebenen Typs für jedes passende Element auszulösen.

Darüber hinaus können Sie beim Auslösen des Ereignisses zusätzliche Parameter an die Funktion Ereignisbehandlung übergeben.

Die Verwendung dieser Funktion kann manuell die Ausführung der an das Element gebundenen Ereignisverarbeitungsfunktion auslösen und löst auch die Ausführung des Standardverhaltens des Elements aus.

Am Beispiel des Formularelements

kann die Verwendung von trigger("submit") das an das Formular gebundene Submit-Ereignis auslösen und auch das Standardverhalten des Formular-Submit-Ereignisses ausführen – die Formularübermittlung Betrieb.

Laut dem Feedback von Netizen @Feiyang ist der Auslöser („Klick“) des Link-Tags ein Sonderfall und löst nicht das Standardverhalten des Link-Klick-Ereignisses aus – springen Sie zum Vorgang Klicken Sie neben dem entsprechenden Link auf „Zugehörige Details hier anzeigen“.

Ab jQuery 1.3 unterstützen Ereignisse, die durch die Funktion trigger() ausgelöst werden, auch das Ereignis-Bubbling, das gesprudelt und an den DOM-Baum übergeben werden kann.

Diese Funktion gehört zum jQuery-Objekt (Instanz).

Syntax

trigger()-Funktion hat hauptsächlich die folgenden zwei Verwendungsformen:

Verwendung 1:

jQueryObject.trigger( events [, extraArguments ] )

Löst Ereignisse des angegebenen Typs (Ereignisse) für jedes übereinstimmende Element aus und kann zusätzliche Parameter (extraArguments) an die Ereignishandlerfunktion übergeben.

Verwendung 2: jQuery 1.3 unterstützt diese Verwendung neu.

jQueryObject.trigger( eventObject [, extraArguments ] )

ist das von der angegebenen Ereignisverarbeitungsfunktion übergebene Ereignisobjekt (eventObject), das zum Auslösen der Ausführung der entsprechenden Ereignisverarbeitung verwendet wird Funktion und kann für Ereignisse verwendet werden. Die Verarbeitungsfunktion übergibt zusätzliche Parameter (extraArguments).

Parameter

Parameterbeschreibung

events String-Typ gibt den Ereignistyp und optionalen Namespace an, z. B. „click“, „focus“, „keydown“. .meinPlugin".

extraArguments Optional/Objekttyp sind die zusätzlichen Parameter, die von der Ereignisverarbeitungsfunktion übergeben werden. Wenn Sie mehrere Parameter übergeben möchten, übergeben Sie diese bitte als Array.

eventObject Der Objekttyp ist ein Ereignisobjekt, das zum Auslösen der an das Objekt übergebenen Ereignisverarbeitungsfunktion verwendet wird. Die Funktion

trigger() übergibt einen Standardparameter für die Ereignisverarbeitungsfunktion, die die Ausführung auslöst, nämlich das Ereignisobjekt, das das aktuelle Ereignis darstellt.

Der Parameter extraArguments wird verwendet, um weitere zusätzliche Parameter an die Event-Handling-Funktion zu übergeben. Wenn extraArguments in Array-Form vorliegen, dient jedes Element als Parameter für die Funktion .

Rückgabewert

trigger()Der Rückgabewert der Funktion ist vom Typ jQuery und gibt das aktuelle jQuery-Objekt selbst zurück.

Beispiel und Beschreibung

Bitte beziehen Sie sich auf den folgenden anfänglichen HTML-Code:

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

Zuerst binden wir Ereignisse an die obige Schaltfläche und Dann verwenden Sie die Funktion trigger(), um Ereignisse direkt auszulösen. Der entsprechende Code lautet wie folgt:

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

Darüber hinaus kann die Funktion trigger() auch nur Ereignisse auslösen, die einen angegebenen Namespace enthalten (Namespaces sind nur). unterstützt in 1.4.3+).

function A( event ){
    alert( 'A' );
}
function B( event ){
    alert( 'B' );
}
function C( event ){
    alert( 'C' );
}
var $btn1 = $("#btn1");
// 为btn1元素的click事件绑定事件处理函数
$btn1.bind( "click.foo.bar", A );
$btn1.bind( "click.test.foo", B );
$btn1.bind( "click.test", C );
// 触发btn1的click事件，不限定命名空间
$btn1.trigger("click"); // 触发A、B、C
// 触发btn1的包含命名空间foo的click事件
$btn1.trigger("click.foo"); // 触发A、B
// 触发btn1的包含命名空间test的click事件
$btn1.trigger("click.test"); // 触发B、C
// 触发btn1的同时包含命名空间foo和test的click事件
$btn1.trigger("click.foo.test"); // 触发B

Das obige ist der detaillierte Inhalt vonTutorial zur Verwendung der jQuery.trigger()-Funktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!