Wie übergebe ich ein Ereignisobjekt an eine Funktion in Javascript?

74 
<button type="button" value="click me" onclick="check_me();" />

function check_me() {
  //event.preventDefault();
  var hello = document.myForm.username.value;
  var err = '';

  if(hello == '' || hello == null) {
    err = 'User name required';
  }

  if(err != '') { 
     alert(err); 
     $('username').focus(); 
     return false; 
   } else { 
    return true; }
}

Wenn ich in Firefox versuche, einen leeren Wert zu senden, wird der Fehler ausgelöst und der Fokus wieder auf das Element gesetzt. Aber im IE passiert nicht dasselbe, da es einen Fehler auslöst und nach dem Klicken auf OK das Formular veröffentlicht (gibt true zurück).

Wie kann ich das vermeiden? Ich habe überlegt, dies zu vermeiden event.preventDefault(), bin mir aber nicht sicher, wie ich das mit dieser Methode machen soll. Ich habe versucht zu bestehen checkme(event).. aber es hat nicht funktioniert. Ich benutze Prototype js.

(Ich weiß, wie man ein Ereignis übergibt, wenn ich eine .click-Funktion in Javascript binde .. anstatt onclickinnerhalb von html .. mit Jquery aufzurufen, aber ich muss diesen Code debuggen)

javascript dom-events TigerTiger
quelle

Antworten:

27

Obwohl dies die akzeptierte Antwort ist, ist die Antwort von toto_tico unten besser :)

Versuchen Sie, den Onclick js dazu zu bringen, 'return' zu verwenden, um sicherzustellen, dass der gewünschte Rückgabewert verwendet wird ...

<button type="button" value="click me" onclick="return check_me();" />
Paul Dixon
quelle
1
nicht genau das, wonach ich gesucht habe .. aber ich werde es als beantwortet markieren. Vielen Dank.
TigerTiger
Inline-Javascript ist jetzt sehr verpönt!
Daniella
1
Nun, es ist 10 Jahre alt. Die andere Antwort ist besser, ich werde die Leute dorthin leiten ...
Paul Dixon
204

  1. Ändern Sie die Definition der Funktion check_me als ::

     function check_me(ev) {

  2. Jetzt können Sie auf die Methoden und Parameter des Ereignisses zugreifen, in Ihrem Fall:

     ev.preventDefault();

  3. Dann müssen Sie den Parameter beim Einklick im Inline-Aufruf übergeben ::

     <button type="button" onclick="check_me(event);">Click Me!</button>

Ein nützlicher Link , um dies zu verstehen.

Vollständiges Beispiel:

<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="text/javascript">
      function check_me(ev) {
        ev.preventDefault();
        alert("Hello World!")
      }
    </script>
  </head>
  <body>
    <button type="button" onclick="check_me(event);">Click Me!</button>
  </body>
</html>

Alternativen (Best Practices):

Obwohl das Obige die direkte Antwort auf die Frage ist ( Übergeben eines Ereignisobjekts an ein Inline-Ereignis ), gibt es andere Möglichkeiten, Ereignisse zu behandeln, die die Logik von der Präsentation trennen

A. Verwenden von addEventListener:

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <button id='my_button' type="button">Click Me!</button>

    <!-- put the javascript at the end to guarantee that the DOM is ready to use-->
    <script type="text/javascript">
      function check_me(ev) {
        ev.preventDefault();
        alert("Hello World!")
      }
      
      <!-- add the event to the button identified #my_button -->
      document.getElementById("my_button").addEventListener("click", check_me);
    </script>
  </body>
</html>

B. Isolieren von Javascript:

Beide oben genannten Lösungen eignen sich gut für ein kleines Projekt oder eine hackige, schnelle und schmutzige Lösung. Bei größeren Projekten ist es jedoch besser, den HTML- Code vom Javascript zu trennen.

Legen Sie einfach diese beiden Dateien in den gleichen Ordner:

  • example.html:
<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <button id='my_button' type="button">Click Me!</button>

    <!-- put the javascript at the end to guarantee that the DOM is ready to use-->
    <script type="text/javascript" src="example.js"></script>
  </body>
</html>
  • example.js:
function check_me(ev) {
    ev.preventDefault();
    alert("Hello World!")
}
document.getElementById("my_button").addEventListener("click", check_me);
toto_tico
quelle
1
Ich bin gespannt, wie das bei Verwendung von addEventListener aussehen würde. Zum Beispiel würde es so aussehen? buttonElement.addEventListener ("click", check_me (event)).
Code Novice
2
@CodeNovice mit .addEventListener('click', check_me);dem Ereignis wird automatisch als erstes Argument übergeben. Wenn Sie also Ihre Funktion wie folgt definieren, können check_me(e){...}Sie das Ereignis eproblemlos in der Funktion verwenden. Manchmal bauen die Leute es so, aber das wird nicht benötigt.addEventListener('click', (e) => check_me(e));
Alex L
2
Die Frage und diese Antwort von @toto_tico konzentrieren sich auf das, was wir als "Inline-Ereignisse" bezeichnen, wobei der Ereignishandler als Zeichenfolge definiert ist, die analysiert und für einen Funktionsaufruf (oder ein anderes gültiges JavaScript) ausgewertet wird. Sie können einfach eine Zeile wie schreiben <button ... onclick="console.log("Hello world");">Click</button>und diese Zeile würde ausgeführt. Sie können auch zwei Funktionen definieren, ... onclick="check_me(event); another_func(event);"...wenn Sie wirklich möchten, und beide werden ausgeführt. Neben dem Schlüsselwort eventkönnen Sie auch thiseinen Verweis auf das aufrufende Element übergeben.
Alex L
-3

Ich würde Ihre Bindung ändern, um zu sein:

<button type="button" value="click me" onclick="check_me" />

Ich würde dann Ihre check_me()Funktionsdeklaration wie folgt ändern :

function check_me() {   
  //event.preventDefault();
  var hello = document.myForm.username.value;
  var err = '';

  if(hello == '' || hello == null) {
    err = 'User name required';
  }

  if(err != '') { 
     alert(err); 
     $('username').focus(); 
     event.preventDefault(); 
   } else { 
    return true; }
}
John
quelle
Sie können nicht einfach davon ausgehen, dass "Ereignis" definiert ist. Ihr Code gibt mir diesen Laufzeitfehler: "ReferenceError: Ereignis ist nicht definiert". Beispielcode: function awesome () {console.info (event); } genial();
HoldOffHunger
@HoldOffHunger Diese Funktion soll aufgerufen werden, wenn ein Ereignis inline auftritt. Warum würden Sie es direkt außerhalb eines Ereignisses nennen?
Andrews