JQuery vergleicht den Unterschied zwischen trigger() und triggerHandler() anhand eines einfachen Beispiels-js-Tutorial-php.cn

JQuery vergleicht den Unterschied zwischen trigger() und triggerHandler() anhand eines einfachen Beispiels

巴扎黑

Freigeben： 2017-06-25 13:31:34

Original

1330 Leute haben es durchsucht

Beim Erstellen von Webseiten-Spezialeffekten müssen wir manchmal Simulationsvorgänge verwenden, also manuelle Vorgänge simulieren. Zu diesem Zeitpunkt werden wir an die beiden Simulationsoperationsmethoden Trigger () und TriggerHandler () in JQuery denken. Beide Methoden können problemlos manuelle Vorgänge simulieren. Was ist also der Unterschied zwischen ihnen? Im Folgenden stellen wir ihre Unterschiede anhand eines einfachen Falls vor: Durch das Aktualisieren der Seite wird automatisch der Effekt des Klickens auf die Schaltfläche simuliert und eine Eingabeaufforderung angezeigt.

Erstellen Sie zunächst eine neue Seite und fügen Sie der Seite den folgenden HTML-Code hinzu:

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

Nach dem Login kopieren

Die Form dieses HTML-Codes hat 2 Schaltflächen und ihre Werte sind „aaa“ und „bbb“, klicken Sie nun auf eine dieser beiden Schaltflächen, Sie gelangen zur Seite http://wanlimm.com.

Dann fügen Sie den JS-Code zwischen hinzu:

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

Nach dem Login kopieren

Hier verwenden wir die Trigger-Methode, aktualisieren Sie diese Auf der Seite werden zwei Popup-Fenster angezeigt, in denen „aaa“ bzw. „bbb“ angezeigt wird. Anschließend wird das Formularverhalten automatisch verwendet, um automatisch zur Seite http://wanlimm.com zu springen.

Wenn Sie Trigger durch TriggerHandler ersetzen, wird nur ein Popup-Fenster angezeigt, das Formularverhalten wird blockiert und es wird nicht automatisch zur Seite http://wanlimm.com gesprungen.

Wir entfernen dann den blauen Formularcode im HTML-Code und fügen dann die Methode CSS wie folgt zum JS-Code hinzu:

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

Nach dem Login kopieren

Wenn wir die Seite aktualisieren, wird sie angezeigt zweimal Hinter dem Fenster wird der Text in der Schaltfläche rot. Wenn Trigger jedoch in TriggerHandler geändert wird, wird das Fenster nach dem Aktualisieren der Seite nur einmal geöffnet und der Text wird nicht rot.

Um die Unterschiede zwischen Trigger und TriggerHandler zusammenzufassen:

1. Die Methode triggerHandler() löst nicht das Standardverhalten des Ereignisses aus, Trigger() jedoch schon.

2. Die Methode triggerHandler() wirkt sich nur auf das erste übereinstimmende Element aus, während .trigger() sich auf alle auswirkt.

3. Die Methode „triggerHandler()“ kann nicht mit anderen Methoden verbunden werden, da sie den Rückgabewert der aktuellen Ereignisausführung zurückgibt, nicht das Objekt „trigger()“ kann mit anderen Methoden verbunden werden, da sie den zurückgibt aktuelles ereignisauslösendes Element.

4. triggerHandler() wird beim Erstellen eines Ereignisses nicht sprudeln. trigger() wird sprudeln, aber diese Art von Sprudel kann nur durch benutzerdefinierte Ereignisse widergespiegelt werden.

Das obige ist der detaillierte Inhalt vonJQuery vergleicht den Unterschied zwischen trigger() und triggerHandler() anhand eines einfachen Beispiels. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!