Maison > interface Web > js tutoriel > JQuery simule les événements de clic et déclenche automatiquement les événements

JQuery simule les événements de clic et déclenche automatiquement les événements

小云云
Libérer: 2017-11-17 11:51:16
original
38924 Les gens l'ont consulté

Parfois, il est nécessaire de simuler les opérations de l'utilisateur pour obtenir l'effet de clic. Par exemple, une fois que l'utilisateur accède à la page, l'événement de clic est déclenché sans que l'utilisateur ait à cliquer activement. Dans JQuery, les opérations de simulation peuvent être effectuées à l'aide de la méthode trigger(). Par exemple, vous pouvez utiliser le code suivant pour déclencher l'événement click du bouton avec l'identifiant btn. Dans cet article, nous allons vous expliquer comment JQuery simule les événements de clic et déclenche automatiquement les événements.

 $('#btn').trigger("click");
Copier après la connexion

De cette façon, lorsque la page est chargée, l'effet souhaité sera immédiatement affiché. Vous pouvez également abréger directement click() pour obtenir le même effet :

$('#btn').click();
Copier après la connexion

Déclencher un événement personnalisé

La méthode trigger() peut non seulement déclencher des événements du même nom pris en charge par le navigateur, des événements avec des noms personnalisés peuvent également être déclenchés. Par exemple, pour lier un événement "myClick" à un élément, le code JQuery est le suivant :

  $('#btn').bind("myClick", function(){      
 $(&#39;#test&#39;).append("<p>我的自定义事件.</p>");      
 });
Copier après la connexion

Pour déclencher cet événement, vous pouvez utiliser le code suivant :

$(&#39;#btn&#39;).trigger("myClick");
Copier après la connexion

Pass data< La méthode 🎜>

trigger(type[, data]) a deux paramètres. Le premier paramètre est le type d'événement à déclencher et le deuxième paramètre est les données supplémentaires à transmettre à la fonction de traitement d'événement. , passé sous forme de tableau. Vous pouvez généralement distinguer si cet événement est déclenché par le code ou par l'utilisateur en passant un paramètre à la fonction de rappel.

Ce qui suit est un exemple de transmission de données.

$(function(){      
$(&#39;#btn&#39;).bind("myClick", function(event, message1, message2){      
$(&#39;#test&#39;).append( "<p>"+message1 + message2 +"</p>");      
 });      
 $(&#39;#btn&#39;).click(function(){      
 $(this).trigger("myClick",["我的自定义","事件"]);      
}).trigger("myClick",["我的自定义","事件"]);      
 })
Copier après la connexion
Effectuer l'opération par défaut

Une fois que la méthode trigger() a déclenché un événement, l'opération par défaut du navigateur sera effectuée. Par exemple :

 $("input").trigger("focus");
Copier après la connexion
Le code ci-dessus déclenchera non seulement l'événement focus lié à l'élément , mais fera également en sorte que l'élément opération).

Si vous souhaitez uniquement déclencher l'événement de focus lié sans effectuer l'opération par défaut du navigateur, vous pouvez utiliser une autre méthode similaire dans jQuery - la méthode triggerHandler().

$("input").triggerHandler("focus");
Copier après la connexion
Cette méthode déclenchera l'événement spécifique lié à l'élément , et en même temps annulera l'opération par défaut du navigateur pour cet événement, c'est-à-dire que la zone de texte déclenchera uniquement la liaison événement de focus et n’obtiendra pas le focus.

Cet article présente principalement JQuery pour simuler des événements de clic et déclencher automatiquement des événements. J'espère qu'il sera utile à tout le monde.

Recommandations associées :

js simule un événement de clic

js simule des compétences en matière de code_javascript de mise en œuvre d'un événement de clic

Javascript simule les événements de clic (clics sur les liens et clics html) compatibles avec les compétences IE/Firefox_javascript

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal