JavaScript에서 ctrlKey는 마우스 이벤트 객체가 제공하는 속성 중 하나로, 마우스 버튼을 클릭하는 순간 Ctrl 키가 함께 눌려 있었는지 여부를 확인할 수 있습니다.
ctrlKey 속성의 동작 방식
ctrlKey 속성은 불리언(Boolean) 값을 반환합니다. 사용자가 마우스를 클릭할 때 Ctrl 키를 누르고 있었다면 true, 그렇지 않다면 false를 반환합니다. 이를 활용하면 Ctrl + 클릭 조합에 반응하는 인터랙션(예: 다중 선택, 링크 새 탭 열기 등)을 쉽게 구현할 수 있습니다.
주요 특징
- 반환 값: true(Ctrl 키 눌림) / false(Ctrl 키 안 눌림)
- 적용 이벤트: mousedown, mouseup, click 등 대부분의 마우스 이벤트
- 유사 속성: altKey(Alt 키), shiftKey(Shift 키), metaKey(Mac의 Command 키 등)
ctrlKey 사용 예제
아래 코드는 문서 내에서 마우스를 클릭했을 때 Ctrl 키의 눌림 상태를 감지하여 알림창으로 보여주는 간단한 예제입니다.
<!DOCTYPE html>
<html>
<body onmousedown="funcCtrlKey(event)">
<div>Ctrl 키를 누른 상태로 이곳을 클릭해 보세요.</div>
<script>
function funcCtrlKey(event) {
if (event.ctrlKey) {
alert("CTRL 키: 눌림");
} else {
alert("CTRL 키: 눌리지 않음");
}
}
</script>
</body>
</html>코드 설명
<body>태그에onmousedown이벤트 핸들러를 등록하여, 마우스 버튼을 누르는 순간funcCtrlKey함수가 호출됩니다.- 함수에는 브라우저가 자동으로 생성한
event객체가 전달됩니다. event.ctrlKey값이true이면 "CTRL 키: 눌림",false이면 "CTRL 키: 눌리지 않음" 메시지를 경고창으로 표시합니다.
활용 팁
파일 관리자처럼 여러 항목을 선택해야 하는 UI를 만들 때, click 이벤트와 함께 ctrlKey를 검사하면 Ctrl 키를 누른 클릭만 다중 선택으로 처리하는 기능을 간단히 구현할 수 있습니다. 또한 shiftKey나 metaKey와 조합하면 다양한 키보드·마우스 조합 입력에 유연하게 대응하는 사용자 경험을 제공할 수 있습니다.