Navngivne event handlers i JavaScript

I tidligere lektioner brugte vi anonyme funktioner som event handlers. Dette er faktisk ikke nødvendigt - funktionen kan være en almindelig, med navn. Lad os for eksempel have en sådan funktion:

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

Lad der også være en knap:

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

Lad os gøre det sådan, at ved klik på knappen udføres vores funktion func. For at gøre dette, sender vi navnet på vores funktion som parameter til addEventListener, sådan her:

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

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

Følgende HTML-kode er givet:

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

Følgende funktioner er givet:

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

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

Gør det sådan, at ved klik på den første knap udføres funktionen func1, og ved klik på den anden - funktionen func2.