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

1330 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!