Rastreamento de Teclas Modificadoras em JavaScript

Usando o objeto Event, podemos descobrir se as teclas Ctrl, Alt e Shift estavam pressionadas no momento do evento. Isso é feito com as propriedades ctrlKey, altKey e shiftKey - elas têm um valor true ou false dependendo se a tecla estava pressionada no momento do evento ou não.

Vamos ver um exemplo. Suponha que temos o seguinte botão:

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

Ao clicar no botão, exibiremos uma mensagem indicando se uma das teclas Ctrl, Alt e Shift estava pressionada:

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

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

Dado um elemento. Faça com que ao clicar nele, ele fique vermelho, mas apenas se a tecla Alt estiver pressionada no momento do clique.

Suponha que você tenha uma lista ul com tags li:

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

Faça com que, ao clicar em qualquer li, o número 1 seja adicionado ao final de seu texto, se a tecla Ctrl estiver pressionada, e o número 2, se a tecla Shift estiver pressionada.