JavaScriptでの修飾キーの追跡

Eventオブジェクトを使用して、イベント発生時にCtrl、 Alt、Shiftキーが押されていたかどうかを知ることができます。これは、ctrlKey、 altKey、shiftKeyプロパティを使用して行います。これらのプロパティは、イベント発生時にそのキーが押されていたかどうかに応じて、 trueまたはfalseの値を持ちます。

例を見てみましょう。次のボタンがあるとします：

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

ボタンをクリックしたときに、 Ctrl、Alt、Shiftキーのいずれかが押されていたかどうかのメッセージを出力するようにします：

let 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が押されました');
	}
});

ある要素が与えられます。 Altキーが押されている状態でクリックされた場合にのみ、その要素が赤色に変わるようにしてください。

liタグを持つulリストがあるとします：

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

どのliをクリックしても、 Ctrlキーが押されていた場合はそのテキストの末尾に数字1を追加し、 Shiftキーが押されていた場合は数字2を追加するようにしてください。