Explication détaillée de la fonction jQuery.triggerHandler()

La fonction

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

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

Cette fonction fonctionne de manière similaire à la fonction trigger(), mais la fonction triggerHandler() présente les exceptions suivantes :

triggerHandler() ne déclenchera pas le comportement par défaut de l'élément d'exécution (tel que le comportement de saut de l'événement de clic sur le lien par défaut, le comportement de soumission par défaut de l'événement de soumission de formulaire).

triggerHandler() déclenche des événements uniquement pour le premier élément correspondant dans l'objet jQuery.

Les événements déclenchés par triggerHandler() ne remontent pas dans l'arborescence DOM, donc l'événement ne remonte pas vers aucun de ses éléments ancêtres. La valeur de retour de

triggerHandler() est la valeur de retour de la fonction de traitement d'événement correspondante, et non de l'objet jQuery actuel lui-même.

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

Syntaxe

Cette fonction est ajoutée dans jQuery 1.2.

jQueryObject.triggerHandler( events [, extraArguments ] )

Parameters

Description du paramètre

events Le type de chaîne spécifie le type d'événement et Namespace facultatif , tels que "clic", "focus", "keydown.myPlugin".

extraArguments optionnel/type d'objet sont des 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. La fonction

triggerHandler() 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 de la fonction .

Valeur de retour

La valeur de retour de la fonction triggerHandler() est de n'importe quel type et renvoie la valeur de retour de la fonction de traitement d'événement qui a déclenché l'exécution.

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 triggerHandler() pour déclencher directement l'événement. 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 );
// 触发btn1的click事件
// 虽然$buttons匹配两个button元素，但只会触发第一个匹配元素的click事件
$buttons.triggerHandler("click");
/*(追加文本)
触发元素#btn1的[click]事件，额外的函数参数为:undefined, undefined
*/
$("#btn2").triggerHandler("click", "CodePlayer");
/*(追加文本)
触发元素#btn2的[click]事件，额外的函数参数为:CodePlayer, undefined
*/
// arg1 = "张三"， arg2 = 20
$("a").triggerHandler("mouseover", ["张三", 20 ] );
/*(追加文本)
触发元素#a1的[mouseover]事件，额外的函数参数为:张三, 20
*/
$("a").triggerHandler("mouseleave", { name: "张三", age: 18 } );
/*(追加文本)
触发元素#a1的[mouseleave]事件，额外的函数参数为:[object Object], undefined
*/

Exécutez le code (veuillez copier les autres codes sur la page de démonstration pour l'exécuter)

La fonction triggerHandler() peut également être transmise en fonction de l'objet Enter the Event de la fonction de traitement d'événement pour déclencher l'événement correspondant.

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).triggerHandler( event );
});
// $btn1.triggerHandler( "click" ); // 调用一次click1、调用一次click2
$btn1.triggerHandler( "click", true ); // 调用两次click1、调用两次click2
此外，triggerHandler()函数还可以只触发包含指定定命名空间的事件(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.triggerHandler("click"); // 触发A、B、C
// 触发btn1的包含命名空间foo的click事件
$btn1.triggerHandler("click.foo"); // 触发A、B
// 触发btn1的包含命名空间test的click事件
$btn1.triggerHandler("click.test"); // 触发B、C
// 触发btn1的同时包含命名空间foo和test的click事件
$btn1.triggerHandler("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!