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을 그 텍스트 끝에 추가하도록 만드세요.