1unitedpower: Handler-Registrierung

Beitrag lesen

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

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

…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.

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

button.addEventListener('click', checkbutton);

Zur Erklärung: Zum einen ist die Variante ohne Closure kürzer und besser lesbar. Zum anderen verkörpern die Varianten aber auch semantische Unterschiede: Die Version mit Closure vergisst den this-Kontext und den Event-Parameter. Die direkte Variante von Orlok entspricht foglich mehr dieser Semantik:

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

Damit hat man dann im Eventhandler checkbutton mehr Informationen über das eingetretene Eregignis zur Verfügung.

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

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…

Diese Gedankenspiele hinsichtlich Performance sind recht naiv. Man kann heute davon ausgehen, dass kein Browser eine gewöhnliche Baumsuche benutzt um Elemente im DOM zu finden. Stattdessen werden unter der Haube wohl eine Reihe von Optimierungsstrategien implementiert sein, bspw. auf Basis von zusätzlichen Indexstrukturen und Caching. Im Zweifelsfall würde ich immer die am besten lesbare Variante vorziehen und erst im Anschluss die Performance messen und ggf. optimieren. Das wäre für mich in dem Fall dann die Variante von Gunnar.