Flera addEventListener

Koncept

• Flera händelselyssnare gör att ett element kan lyssna på flera händelser.
• Händelseorder: Ordningen på händelserna som utlöses.
• Exekveringsordning: Ordningen på callback-funktionerna som körs.

Steg för att lägga till flera händelselyssnare

1. Välj elementet att lyssna på.
2. Definiera callback-funktionerna för varje händelse.
3. Använd addEventListener()-metoden för att lägga till lyssnare för varje händelse.

JavaScript-exempel

const element = document.querySelector('button');

// Callback-funktion för klickhändelse
const clickHandler = () => {
  console.log('Klickhändelse utlöst');
};

// Callback-funktion för musöverhändelse
const hoverHandler = () => {
  console.log('Musöverhändelse utlöst');
};

// Lägg till lyssnare för båda händelserna
element.addEventListener('click', clickHandler);
element.addEventListener('mouseover', hoverHandler);

Observationer

• Två callback-funktioner är definierade.
• addEventListener() anropas två gånger för att lägga till lyssnare för klick- och musöverhändelser.
• Händelseordningen är: Klick > Musöver
• Exekveringsordningen är: klickHandler > hoverHandler