Het volgen van modifier-toetsen in JavaScript

Met het object Event kunnen we te weten komen, of de toetsen Ctrl, Alt en Shift op het moment van de gebeurtenis waren ingedrukt. Dit gebeurt met behulp van de eigenschappen ctrlKey, altKey en shiftKey - ze hebben de waarde true of false afhankelijk van of die toets op het moment van de gebeurtenis was ingedrukt of niet.

Laten we een voorbeeld bekijken. Stel we hebben de volgende knop:

html<button id="elem">text</button>

Bij een klik op de knop zullen we een bericht tonen over of een van de toetsen Ctrl, Alt en Shift was ingedrukt:

javascriptlet elem = document.querySelector('#elem');

elem.addEventListener('click', function(event) {
  if (event.ctrlKey) {
    console.log('Ctrl ingedrukt');
  }
  
  if (event.altKey) {
    console.log('Alt ingedrukt');
  }
  
  if (event.shiftKey) {
    console.log('Shift ingedrukt');
  }
});

Задание 1

Gegeven een element. Zorg ervoor dat het bij een klik erop rood kleurt, maar alleen als op het moment van klikken de toets Alt is ingedrukt.

Задание 2

Stel je hebt een lijst ul met tags li:

html<ul id="elem">
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ul>

Zorg ervoor dat bij een klik op een willekeurige li, aan het einde van de tekst het getal 1 wordt toegevoegd, als de toets Ctrl is ingedrukt, en het getal 2, als de toets Shift is ingedrukt.