shiftKey 마우스 이벤트 속성의 역할
JavaScript에서 shiftKey는 마우스 이벤트 객체가 제공하는 불리언(Boolean) 속성입니다. 이 속성은 마우스 버튼을 클릭하는 순간 SHIFT 키가 함께 눌려 있었는지 여부를 알려줍니다.
동작 방식은 다음과 같습니다.
- 마우스 클릭 시 SHIFT 키가 눌려 있으면
true를 반환합니다. - SHIFT 키가 눌려 있지 않으면
false를 반환합니다.
이 속성은 mousedown, mouseup, click 등 다양한 마우스 이벤트에서 활용할 수 있으며, 사용자가 보조 키(Shift, Ctrl, Alt)와 함께 마우스를 조작했는지 판별해야 하는 상황에서 유용하게 사용됩니다. 예를 들어, Shift 키와 클릭을 조합해 여러 항목을 선택하거나 반대 동작을 실행하는 UI를 구현할 수 있습니다.
shiftKey 속성 구현 예제
아래 코드를 실행하면 SHIFT 키를 누른 상태로 클릭했는지에 따라 다른 결과를 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<body onmousedown = "funcShiftKey(event)">
<div>Press and hold SHIFT key and then click here.</div>
<script>
function funcShiftKey(event) {
if (event.shiftKey) {
alert("SHIFT key: Pressed");
} else {
alert("SHIFT key: NOT Pressed");
}
}
</script>
</body>
</html>코드 설명
onmousedown이벤트가 발생하면funcShiftKey(event)함수가 호출됩니다.- 함수 내부에서
event.shiftKey값을 검사하여 SHIFT 키의 눌림 여부를 판단합니다. - 눌려 있으면 "SHIFT key: Pressed", 그렇지 않으면 "SHIFT key: NOT Pressed"라는 알림 창이 표시됩니다.
참고로 같은 방식으로 event.ctrlKey(Ctrl 키), event.altKey(Alt 키), event.metaKey(Windows 키 또는 Command 키) 속성도 함께 사용할 수 있어, 다양한 키보드·마우스 조합 이벤트 처리가 가능합니다.