JavaScript/jQuery에서 화살표 키 이벤트를 처리하는 방법은 무엇입니까?

Javascript/jQuery

Javascript 또는 jQuery에서 키보드 입력으로 작업할 때 특정 키에 함수를 바인딩하면 사용자 상호 작용을 제어하고 반응형 탐색을 제공하는 데 중요합니다. 이러한 맥락에서 일반적인 과제는 왼쪽 및 오른쪽 화살표 키 이벤트를 캡처하는 것입니다. 일반적인 믿음과는 달리 jQuery용 js-hotkey 플러그인은 기본적으로 화살표 키 바인딩을 지원하지 않습니다.

일반 Javascript 사용

외부 라이브러리의 경우 다음 코드 조각을 고려하세요.

<code class="javascript">document.onkeydown = function(e) {
    switch(e.which) {
        case 37: // left
        break;

        case 38: // up
        break;

        case 39: // right
        break;

        case 40: // down
        break;

        default: return; // exit this handler for other keys
    }
    e.preventDefault(); // prevent the default action (scroll / move caret)
};</code>

이 코드에서 주요 이벤트는 onkeydown 이벤트 핸들러를 사용하여 모니터링됩니다. 화살표 키는 각각의 값으로 식별됩니다(예: 왼쪽은 37, 오른쪽은 39). 스크롤이나 캐럿 이동과 같은 기본 브라우저 동작을 방지하기 위해 PreventDefault() 메서드가 사용됩니다.

IE8 지원

Internet Explorer 8을 지원해야 하는 경우 which 속성을 지원하지 않는 , 다음과 같이 코드를 확장할 수 있습니다.

<code class="javascript">document.onkeydown = function(e) {
    e = e || window.event; // IE8 compatibility
    switch(e.which || e.keyCode) {
        // ...
    }
};</code>

최신 솔루션: KeyboardEvent.key

최신 브라우저에서는 KeyboardEvent.which 속성은 더 이상 사용되지 않습니다. 화살표 키 감지에 대한 최신 접근 방식을 위해 대신 KeyboardEvent.key 속성을 활용할 수 있습니다.

<code class="javascript">document.addEventListener('keydown', (event) => {
  switch (event.key) {
    case 'ArrowLeft': // left
      break;
    case 'ArrowUp': // up
      break;
    case 'ArrowRight': // right
      break;
    case 'ArrowDown': // down
      break;
    default: return;
  }
});</code>

위 내용은 JavaScript/jQuery에서 화살표 키 이벤트를 처리하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!