Ich habe eine Situation, in der ich nicht herausfinden kann, wer das Formular einreicht.Wie kann man herausfinden, wer das Submit-Ereignis auslöst?
Ich habe eine Dom wie unten.
<form method="POST" action="action.do">
<button onclick = "eventHandler()">Test</button>
</form>
Jedes Mal, wenn ich auf den Button klicke ich einen Haltepunkt der Lage getroffen siehe einreichen und nichts von Call-Stack, um herauszufinden.
Benötigen
Im Allgemeinen helfen, vermeiden onxyz -Attribut-style-Ereignishandler verwenden. Aber wenn Sie dies tun, rufen Sie sie richtig auf this und übergeben das Ereignis; Sie können auch return aufnehmen möchten, wenn Sie return false im Handler verwenden möchten die Standardaktion des Ereignisses zu verhindern:
<button onclick = "return eventHandler.call(this, event)">Test</button>
<!-- --------------^^^^^^--------------^^^^^^^^^^^^^^^^^ -->
(Ohne die Rückkehr auf modernen Browsern können Sie die preventDefault() Methode für das Ereignis verwenden Objekt anstelle von false.
Innerhalb des Handlers, this verweist auf das Element (die button, in diesem Fall) und das erste Argument wird das Ereignisobjekt, das andere nützliche Informationen hat.
Beachten Sie, dass diese Prozedur tut nicht die submit Ereignis behandeln. Es handhabt ein click Ereignis auf einer Absenden-Schaltfläche. submit ist ein Ereignis, das auf Formulare und nicht auf Schaltflächen ausgelöst wird.
Aber im Allgemeinen würde ich moderne Event-Handling, empfehlen, die das Ereignis bis Haken, sobald die Taste vorhanden ist:
var btn = document.querySelector("selector-for-the-button");
btn.addEventListener("click", eventHandler, false);
Damit wird eventHandler mit dem richtigen this und übergeben das Ereignis aufgerufen werden Objekt.
Hinweis: Die veralteten Browser IE8 und früher haben addEventListener nicht. Die veralteten Browser IE9-IE10 haben es aber vorgetäuscht, wenn sie im "Kompatibilitäts" -Modus sind. IE11 hoppelt sich ähnlich, wenn es im "Kompatibilitäts" -Modus ist. Wenn Sie einen dieser unterstützen müssen, können Sie die hookEvent Funktion in this answer verwenden.
Oder verwenden Sie natürlich eine Bibliothek wie jQuery, oder ein Framework wie AngularJS oder React, etc., das diese Cross-Browser-Probleme für Sie behandelt.
@ John Hascall: Ziemlich. Es gibt keinen Grund, warum ich das nicht in die Antwort aufnehmen sollte. –
Da type Attribut angegeben ist nicht in button tag:
<button onclick = "eventHandler()">Test</button>
nimmt es standardmäßig type als submit, usw., klicken Sie diese button macht die form nach eventHandler() Code beenden. Um button kein Formular zu senden, fügen Sie type Attribut mit Wert als button hinzu.
Nachfolgend finden Sie eine vollständige Code für das, was suchen Sie:
function eventHandler(e){
console.log(e.target);
}<html>
\t <head>
\t \t <title>Title</title>
\t </head>
\t <body>
\t \t <form method="POST" action="action.do" onsubmit="return false;">
\t \t \t <button onclick = "eventHandler(event)">Test</button>
\t \t </form>
\t </body>
</html>
Versuch 'e.target' von Ereignisobjekt – azad
Wenn Sie definieren als' Funktion Eventhandler (e) {. ..} 'see' e.target' –
Wenn Sie button tag ohne type-Attribut angeben, wird der Standardwert 'submit' verwendet, der dieses Formular nach dem Abschluss von eventHandler() absetzt. Um es zu ändern, geben Sie das Attribut button tag ein. – vvtx