suchen

Heim  >  Artikel  >  Web-Frontend  >  JQuery vergleicht den Unterschied zwischen trigger() und triggerHandler() anhand eines einfachen Beispiels

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

巴扎黑
巴扎黑Original
2017-06-25 13:31:341325Durchsuche

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>

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

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

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

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Nutzungsfreigabe: So verwenden Sie jQuery, um Ereignisse automatisch auszulösenNächster Artikel：Nutzungsfreigabe: So verwenden Sie jQuery, um Ereignisse automatisch auszulösen

In Verbindung stehende Artikel

Mehr sehen