Nazwane procedury obsługi zdarzeń w JavaScript

W poprzednich lekcjach używaliśmy jako procedur obsługi zdarzeń anonimowych funkcji. W rzeczywistości nie jest to konieczne - funkcja może być również zwyczajna, z nazwą. Załóżmy na przykład, że mamy taką funkcję:

javascriptfunction func() {
  console.log('!!!');
}

Załóżmy również, że istnieje przycisk:

html<input id="button" type="submit">

Sprawmy, aby po kliknięciu przycisku wykonała się nasza funkcja func. W tym celu parametrem addEventListener przekażemy nazwę naszej funkcji, w ten sposób:

javascriptlet button = document.querySelector('#button');
button.addEventListener('click', func);

function func() {
  console.log('!!!');
}

html<input id="button1" type="submit" value="button1">
<input id="button2" type="submit" value="button2">

javascriptfunction func1() {
  console.log(1);
}

function func2() {
  console.log(2);
}