Handler-Registrierung

[Orlok]

Hallo Gunnar

Ich habe mit meiner Antwort mal etwas gewartet, da ich mir nicht sicher war, ob du deinen Beitrag nicht vielleicht selbst nochmal korrigieren willst… ;-)

Wenn immer beide aufgerufen werden sollen:

document.getElementById('name').addEventListener('click', function () {
  checkbutton();
  notemsgbefore();
});

Das könnte man so machen, ja. – Aber…

document.getElementById('name').addEventListener('click', function () {
  checkbutton();
});

document.getElementById('name').addEventListener('click', function () {
  notemsgbefore();
});

…ist in der Form natürlich Quatsch.

Wenn beim Ereigniseintritt beide Funktionen aufgerufen werden sollen und die Aufrufe nicht wie in deinem ersten Beispiel zusammengefasst werden sollen, dann sollten auch beide Funktionen direkt als Handler registriert werden, und nicht gekapselt in einer anonymen Funktion.

Wobei in dem Fall das Element nur einmal im DOM gesucht werden sollte […]

Richtig, ergo:

var button = document.getElementById('name');

button.addEventListener('click', checkbutton);
button.addEventListener('click', notemsgbefore);

Weiterhin lassen die vom TO verwendeten Bezeichner vermuten, dass der entsprechende Button nicht irgendwo isoliert sein Dasein fristet, sondern Teil eines Formulars ist.

Das heißt, semantisches Markup vorausgesetzt, könnte der Button auch über das form.elements API referenziert werden, was den Vorteil hätte, dass überhaupt nicht das gesamte DOM abgesucht werden müsste…

var button = document.forms['myForm'].elements['myButton'];

…was sowohl mittels der ID als auch mittels des hier zulässigen name-Attributes als auch über den jeweiligen Index funktionieren würde.

Sollte die angelegte – eventuell sogar globale – Variable darüber hinaus keine Verwendung finden, könnte man den Job auch von einem IIFE (Immediately-Invoked Function Expression) erledigen lassen:

(function (button) {
  button.addEventListener('click', checkbutton);
  button.addEventListener('click', notemsgbefore);
}(document.forms['myForm'].elements['myButton']));

Dieser könnte der Lesbarkeit des Codes zuliebe auch einen passenden Bezeichner bekommen, da ein solcher nur innerhalb des Ausdrucks Gültigkeit besäße.

Aber für welche Variante sich der TO auch entscheiden mag, haben wir beide ein für ihn gegebenenfalls relevantes Thema bislang ausgespart, nämlich die Frage, wo die Registrierung vorzunehmen ist.

Der TO hatte seine Handler bislang ja unglücklicherweise im HTML notiert, was zwar grundsätzlich abzulehnen ist, aber immerhin den Vorteil bietet, dass das Objekt, für welches der Handler registriert werden soll, zum Zeitpunkt der Registrierung auf jeden Fall existiert.

Würde der TO sein script ohne weitere Angaben im Kopf des Dokuments notieren, würde natürlich ein Type Error geworfen, da das DOM-Objekt das den Button repräsentiert zum Zeitpunkt der Scriptausführung und mithin der Handler-Registrierung noch gar nicht erzeugt wurde.

Wird ein externes Script eingebunden, wäre hier die Notierung des defer-Attributes eine Möglichkeit, das die Ausführung des Scripts verzögert bis das Dokument fertig geparst wurde:

<script src="script.js" defer></script>

Besser wäre es wahrscheinlich jedoch, auf das Ereignis DOMContentLoaded zu warten und die Handler dann nach dessen Eintritt zu registrieren:

document.addEventListener('DOMContentLoaded', function ( ) {
  var button = document.forms['myForm'].elements['myButton'];
  button.addEventListener('click', checkbutton);
  button.addEventListener('click', notemsgbefore);
});

Viele Grüße,

Orlok