Tutoriel d'utilisation de la fonction jQuery.trigger()

La fonction

trigger() est utilisée pour déclencher un événement du type spécifié sur chaque élément correspondant.

De plus, vous pouvez également transmettre des paramètres supplémentaires à la fonction gestion des événements lorsque l'événement est déclenché.

L'utilisation de cette fonction peut déclencher manuellement l'exécution de la fonction de traitement d'événements liée à l'élément, et déclenchera également l'exécution du comportement par défaut de l'élément.

En prenant l'élément de formulaire

comme exemple, l'utilisation de trigger("submit") peut déclencher l'événement de soumission lié au formulaire, et également exécuter le comportement par défaut de l'événement de soumission du formulaire - la soumission du formulaire. opération.

Selon les commentaires de l'internaute @Feiyang, le déclencheur ("clic") de la balise de lien est un cas particulier et ne déclenchera pas le comportement par défaut de l'événement de clic de lien - passez à l'opération du lien correspondant, cliquez sur Afficher les détails associés ici.

À partir de jQuery 1.3, les événements déclenchés par la fonction trigger() prennent également en charge le bouillonnement d'événements, qui peut être diffusé et transmis à l'arborescence DOM.

Cette fonction appartient à l'objet (instance) jQuery.

Syntaxe

La fonction trigger() a principalement les deux formes d'utilisation suivantes :

Utilisation 1 :

jQueryObject.trigger( events [, extraArguments ] )

Déclenche des événements du type spécifié (events) sur chaque élément correspondant et peut transmettre des paramètres supplémentaires (extraArguments) à la fonction de gestionnaire d'événements.

Utilisation 2 : jQuery 1.3 prend désormais en charge cette utilisation.

jQueryObject.trigger( eventObject [, extraArguments ] )

est l'objet événement (eventObject) transmis par la fonction de traitement d'événement spécifiée, qui est utilisé pour déclencher l'exécution du traitement d'événement correspondant fonction et peut être utilisée pour des événements. La fonction de traitement transmet des paramètres supplémentaires (extraArguments).

Paramètres

Description du paramètre

events Le type de chaîne spécifie le type d'événement et un espace de noms facultatif, tel que "click", "focus", "keydown" .monPlugin".

extraArguments Le type facultatif/objet correspond aux paramètres supplémentaires transmis par la fonction de traitement d'événements. Si vous souhaitez transmettre plusieurs paramètres, veuillez les transmettre sous forme de tableau.

Le type d'objet eventObject est un objet Event, utilisé pour déclencher la fonction de traitement d'événement transmise à l'objet. La fonction

trigger() transmettra un paramètre par défaut pour la fonction de traitement d'événement qui déclenche l'exécution, qui est l'objet Event représentant l'événement en cours.

Le paramètre extraArguments est utilisé pour transmettre davantage de paramètres supplémentaires à la fonction de gestion des événements. Si extraArguments est sous forme de tableau, chaque élément servira de paramètre à la fonction .

Valeur de retour

trigger()La valeur de retour de la fonction est de type jQuery et renvoie l'objet jQuery actuel lui-même.

Exemple et description

Veuillez vous référer au code HTML initial suivant :

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

Tout d'abord, nous lions les événements au bouton ci-dessus et aux éléments puis utilisez la fonction trigger() pour déclencher directement des événements. Le code correspondant est le suivant :

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

De plus, la fonction trigger() peut également déclencher uniquement les événements qui contiennent un espace de noms spécifié (les espaces de noms sont uniquement pris en charge dans 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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!