Maison > Article > interface Web > JQuery compare la différence entre trigger() et triggerHandler() à travers un exemple simple

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

巴扎黑original: 2017-06-25 13:31:341267parcourir

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>

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 4ec11beb6c39d0703d1751d203c170532cacc6d41bbb37262a98f745aa00fbf0 :

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

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;);
});

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!

Déclaration：

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

Article précédent：Partage d'utilisation : Comment utiliser jQuery pour déclencher automatiquement le déclencheur d'événementsArticle suivant：Partage d'utilisation : Comment utiliser jQuery pour déclencher automatiquement le déclencheur d'événements

Articles Liés

Voir plus