Javascript: Code wird beim Laden aufgerufen, sollte aber ausgeführt werden, wenn ein Klickereignis passiert ist

Ich versuche die JavaScript-Ereignisbehandlung zu verstehen. Ich mag einige Code aufgerufen werden, wenn ich eine Taste drücken, und fügte hinzu, ein Eventlistener - mein Code:Javascript: Code wird beim Laden aufgerufen, sollte aber ausgeführt werden, wenn ein Klickereignis passiert ist

<html> 
<head> 
    <title> 
     PDSA #4.4: Event Registering 
    </title> 
    <script> 
     function changeTheButton(btn){ 
      btn.innerHTML = "Please, don't press again!"; 
      alert("Changed the button"); 
     } 

     function init(){ 
      btn = document.getElementById("button1"); 
      btn.addEventListener("click", changeTheButton(btn), false); 
     } 
    </script> 
</head> 
<body onload="init()"> 
    <form> 
     <button id="button1">Don't press this button</button> 
    </form> 
</body> 
</html>

Wenn ich diese Seite öffnen in Chrome oder Firefox der Text auf den Button bereits „Bitte, nicht drücken nochmal!" und die Warnung wird geöffnet, bevor ich etwas mache.

Warum passiert das? Ich habe erwartet, dass dies passiert, wenn ich den Knopf drücke und nicht auf Last.

Vielen Dank im Voraus für jede Hilfe André

Quelle

2012-03-31 AndreKuntze

Uhr dieser Zeile:

btn.addEventListener("click", changeTheButton(btn), false);

Du nennst tatsächlich changeTheButton genau dort, in der alert führt. Sie wollen wahrscheinlich es als Event-Handler statt registrieren, damit die Warnung aufzuschieben, bis die Taste gedrückt wird:

btn.addEventListener("click", function() { changeTheButton(btn) }, false);

Sie das Ergebnis bei jsFiddle beobachten kann.

Ein weiteres Problem, das auftreten kann, ist, dass das Klicken auf die Schaltfläche zum erneuten Laden der Seite führt, da der Standard-Ereignishandler weiterhin aufgerufen wird. Sie können dies verhindern, indem .preventDefault() auf der Ereignisinstanz anrufen:

function changeTheButton(ev, btn) { 
    alert("Changed the button"); 
    btn.innerHTML = "Please, don't press again!"; 
    ev.preventDefault(); 
} 

function init(){ 
    btn = document.getElementById("button1"); 
    btn.addEventListener("click", function(ev) { 
     changeTheButton(ev, btn) 
    }, false); 
}

Demo.

Quelle

2012-03-31 20:46:56

Hallo, danke für die schnelle Antwort. Kannst du mir sagen, warum der Knopftext zurück zu "Drücken Sie diese Taste nicht" wechselt, wenn ich auf "OK" in der Warnung klicke? Ich möchte, dass der Schaltflächentext wie folgt bleibt: "Bitte nicht nochmal drücken!" wenn es geklickt wurde. – AndreKuntze

@Andre: Nun, du musst nur die Operationen in 'changeTheButton' wechseln: Wenn du zuerst 'alarmieren' willst, dann zuerst 'alert'; –

@Andre: Funktioniert für mich: http://jsfiddle.net/A35qX/2/ –

Javascript: Code wird beim Laden aufgerufen, sollte aber ausgeführt werden, wenn ein Klickereignis passiert ist

Antwort

Verwandte Themen