Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

JavaScript altKey 마우스 이벤트란? 역할과 사용법 정리

JavaScript altKey 마우스 이벤트란?

JavaScript의 altKey 마우스 이벤트 속성은 마우스 버튼을 클릭한 시점에 ALT 키가 함께 눌려 있었는지 여부를 확인하는 데 사용됩니다.

이 속성은 불리언(Boolean) 값을 반환합니다. 마우스를 클릭할 때 ALT 키가 눌려 있었다면 true, 그렇지 않았다면 false를 반환합니다. 이를 활용하면 보조키 조합에 따라 서로 다른 동작을 실행하는 인터랙션을 손쉽게 구현할 수 있습니다.

함께 알아두면 좋은 관련 속성

altKey와 유사하게 다음과 같은 보조키 확인 속성이 제공됩니다.

  • ctrlKey — Ctrl 키 눌림 여부
  • shiftKey — Shift 키 눌림 여부
  • metaKey — Meta 키(Windows의 Windows 키, macOS의 Command 키) 눌림 여부

예제 코드

아래 코드를 실행하고 ALT 키를 누른 상태로 화면을 클릭해 보세요. ALT 키의 눌림 여부에 따라 다른 결과가 표시됩니다.

<!DOCTYPE html>
<html>
  <body onmousedown="funcAltKey(event)">
    <div>ALT 키를 누른 상태에서 여기를 클릭해 보세요.</div>
    <script>
      function funcAltKey(event) {
        if (event.altKey) {
          alert("ALT key: Pressed");
        } else {
          alert("ALT key: NOT Pressed");
        }
      }
   </script>
 </body>
</html>

코드 동작 방식

  • onmousedown="funcAltKey(event)": body 영역에서 마우스 버튼을 누르는 순간 지정된 함수가 호출되도록 이벤트 핸들러를 연결합니다.
  • event.altKey: 이벤트 객체를 통해 해당 시점에 ALT 키가 눌려 있는지 검사하여 true 또는 false를 반환합니다.
  • 조건문의 결과에 따라 "눌렸음(Pressed)" 또는 "눌리지 않았음(NOT Pressed)" 알림이 화면에 표시됩니다.