JQuery compare la différence entre trigger() et triggerHandler() à travers un exemple simple-js tutoriel-php.cn

JQuery compare la différence entre trigger() et triggerHandler() à travers un exemple simple

巴扎黑

Libérer： 2017-06-25 13:31:34

original

1312 Les gens l'ont consulté

Lors de la création d'effets spéciaux de pages Web, nous devons parfois utiliser des opérations de simulation, c'est-à-dire simuler des opérations manuelles. À ce stade, nous penserons aux deux méthodes d'opération de simulation trigger() et triggerHandler() dans JQuery. Ces deux méthodes peuvent facilement simuler des opérations manuelles, alors quelle est la différence entre elles ? Ci-dessous, nous présenterons leurs différences à travers un cas simple. L'effet de ce cas : l'actualisation de la page simulera automatiquement l'effet d'un clic sur le bouton et une invite apparaîtra.

Tout d'abord, créez une nouvelle page et ajoutez le code html suivant à la page :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
*{padding:0; margin:0;}
.hi{background:red;width:100px;height:100px; position:relative;}
</style>
<script type="text/javascript" src="/a/js/jquery-1.10.1.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div class="hi">
<form action="http://wanlimm.com" >
<input type="submit" value="aaa" />
<input type="submit" value="bbb" />
</form>
</div>
</body>
</html>

Copier après la connexion

La forme de ce code HTML a 2 boutons, et leurs valeurs sont "aaa" et "bbb", cliquez maintenant sur l'un de ces deux boutons, vous obtiendrez la page http://wanlimm.com.

Ensuite, ajoutez le code JS entre :

$(function(){
$(":submit").click(function(e){
alert($(this).val());
}).trigger(&#39;click&#39;);
});

Copier après la connexion

Ici, nous utilisons la méthode de déclenchement, actualisez-la page, il y aura deux fenêtres pop-up, affichant respectivement "aaa" et "bbb", puis utilisera automatiquement le comportement du formulaire pour accéder automatiquement à la page http://wanlimm.com.

Si vous remplacez trigger par triggerHandler, il n'y aura qu'une seule fenêtre pop-up, et le comportement du formulaire sera bloqué et il ne passera pas automatiquement à la page http://wanlimm.com.

Nous supprimons ensuite le code du formulaire bleu dans le code html, puis ajoutons la méthode CSS au code JS, comme suit :

$(function(){
$(":submit").click(function(e){
alert($(this).val());
}).trigger(&#39;click&#39;).css(&#39;color&#39;,&#39;red&#39;);
});

Copier après la connexion

Lorsque nous actualisons la page, elle apparaît deux fois Derrière la fenêtre, le texte du bouton deviendra rouge. Cependant, si trigger est remplacé par triggerHandler, après avoir actualisé la page, la fenêtre n'apparaîtra qu'une seule fois et le texte ne deviendra pas rouge.

Pour résumer les différences entre trigger et triggerHandler :

1. La méthode triggerHandler() ne déclenche pas le comportement par défaut de l'événement, mais trigger() le fait.

2. La méthode triggerHandler() n'affectera que le premier élément correspondant, tandis que .trigger() affectera tous.

3. La méthode triggerHandler() ne peut pas être connectée à d'autres méthodes, car elle renvoie la valeur de retour de l'exécution de l'événement en cours, et l'objet trigger() ne peut pas être connecté à d'autres méthodes, car il renvoie la valeur de retour. élément déclencheur d’événement actuel.

4. triggerHandler() ne fera pas de bulle lors de la création d'un événement. trigger() fera des bulles, mais ce type de bulles ne peut être reflété que par des événements personnalisés.

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

JQuery compare la différence entre trigger() et triggerHandler() à travers un exemple simple