Отслеживание клавиш-модификаторов в JavaScript

С помощью объекта Event можно узнать, были ли нажаты в момент события клавиши Ctrl, Alt и Shift. Это делается с помощью свойств ctrlKey, altKey и shiftKey - они имеют значение true или false в зависимости от того, была ли нажата эта клавиша в момент события или нет.

Давайте посмотрим на примере. Пусть у нас дана следующая кнопка:

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

По клику на кнопку будем выводить сообщение о том, была ли нажата одна из клавиш Ctrl, Alt и Shift:

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

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

Задание 1

Дан элемент. Сделайте так, чтобы по клику на него он красился в красный цвет, но только если в момент клика нажата клавиша Alt.

Задание 2

Пусть у вас есть список ul с тегами li:

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

Сделайте так, чтобы по клику на любую li, в конец ее текста добавлялось число 1, если нажата клавиша Ctrl, и число 2, если нажата клавиша Shift.