Dies ist wahrscheinlich nicht Ihre übliche "Wie erfasse ich Formularübermittlungsereignisse?" Frage.

ich versuche zu verstehengenau Wie Form Submit-Ereignisse von jQuery, Vanilla Javascript und dem Browser (IE / FF / Chrome / Safari / Opera) verarbeitet werden - und die Beziehungen zwischen ihnen. (Siehe meine andere Frage.) Nach stundenlangem Googeln und Experimentieren kann ich immer noch nicht zu einem Schluss kommen, weder wegen Zwietracht noch wegen Unbestimmtheit.

Ich beende ein Skript, das sich in Website-Formulare einfügt, sodass die Formulare erst gesendet werden können, wenn eine AJAX-Anfrage zurückkommt.

Im Idealfall:

Der Benutzer füllt das Formular ausDas Formular wird gesendet, es werden jedoch keine zuvor gebundenen Event-Handler aufgerufen, außer meinenMein Handler stellt eine API-Anfrage (natürlich asynchron)Der Benutzer bestätigt die Validierungsergebnisse anhand der API-AntwortDas Senden des Formulars wird normalerweise automatisch fortgesetzt und die anderen Handler aufgerufen, die zuvor unterdrückt wurden

Mein aktuelles Verständnis ist, dass: (diese können falsch sein, korrigieren Sie mich bitte, wenn ja)

jQuery bindet Formular-Submit-Event-Handler an die Submit-Schaltflächeclick VeranstaltungenEreignishandler direkt auf dem submit-Elementclick Ereignisse (ob im Markup wieonclick="" oder gebunden mit jQuery) werden zuerst ausgeführtEreignishandler im Formularsubmit Ereignisse (ob im Markup wieonsubmit="" oder mit jQuery gebunden) werden als nächstes ausgeführtBerufung$('[type=submit]').click() ruft das Formular nicht aufsubmit Ereignis, damit seine Handler nicht aufgerufen werdenBerufung$('form').submit() ruft die Schaltfläche "Senden" nicht aufclick Ereignis, damit seine Handler nicht aufgerufen werdenDennoch ruft ein Benutzer, der auf die Senden-Schaltfläche klickt, Handler auf, die an die Formulare gebunden sindsubmit event ... (aber wie oben erwähnt, macht das Aufrufen des "Submit" -Buttons nicht dasselbe)Eigentlich,irgendein Wenn der Benutzer das Formular sendet (über die Schaltfläche "Senden" oder die Eingabetaste), werden Handler mit jQuery an das Formular gebundensubmit Veranstaltung heißt ...

Gerade jetzt bin ich:

Unbinding-Handler, die mit jQuery an die Submit-Schaltflächen gebunden sindclick Ereignis unter Beibehaltung eines Verweises auf sieBinden meines eigenen Handlers an den Submit-Buttonclick Ereignis, so wird es zuerst ausgeführtNehmen Sie alle im Markup gebundenen Handler mitonclick="" undonsubmit="" (auf ihren jeweiligen Elementen) und binden sie erneut mit jQuery (so dass sie nach meinem ausgeführt werden) und setzen dann die Attribute aufnullBinden Sie ihre Handler erneut (ab Schritt 1), damit sie zuletzt ausgeführt werden

Tatsächlich war dies in meinen eigenen Tests bemerkenswert effektiv, so dass mein Event-Handler zuerst ausgelöst wird (unerlässlich).

Das Problem und meine Fragen:

Mein Handler feuert zunächst wie erwartet (bisher). Das Problem ist, dass mein Handler asynchron ist, sodass ich das Formular unterdrücken muss (preventDefault / stopPropagation / etc)submit oder Schaltfläche "Senden"click Ereignis, das es aufgerufen hat ... bis die API-Anforderung abgeschlossen ist. Wenn dann die API-Anfrage zurückkommt und alles in Ordnung ist, muss ich das Formular submit automatisch erneut aufrufen. Aber wie stelle ich aufgrund meiner obigen Beobachtungen sicher?alles werden die Eventhandler gefeuert, als ob es sich um eine natürliche Form handeln würde?

Was ist der sauberste Weg, um alle Event-Handler zu finden, meinen an die erste Stelle zu setzen und dann das Formular submit erneut aufzurufen, damit alles in der richtigen Reihenfolge aufgerufen wird?

Und was ist der Unterschied, wenn überhaupt, zwischen$('form').submit() und$('form')[0].submit()? (Und das gleiche für$('[type=submit]').click() und$('[type=submit]')[0].click())

tl; dr, Was ist die kanonische, übersichtliche und umfassende Dokumentation zu Javascript / jQuery / Browser-Formularübergabe-Ereignisbehandlung? (Ich suche keine Buchempfehlungen.)

Einige Erklärungen: Ich versuche, einen Großteil der Javascript in den Warenkorb-Checkout-Seiten zu kompensieren, wobei das Formular manchmal nur gesendet wird, wenn der Benutzer auf die Schaltfläche (keine Senden-Schaltfläche) am unteren Rand der Seite klickt oder wenn es solche gibt andere knifflige Szenarien. Bisher war es ziemlich erfolgreich, nur die Übermittlung erneut aufzurufen, das ist wirklich das Problem.