JavaScript 및 jQuery에서 화살표 키를 바인딩하는 방법은 무엇입니까?

JavaScript에서 화살표 키 바인딩

일부 애플리케이션에서는 특정 기능을 키보드의 특정 키에 바인딩해야 합니다. 화살표 키. 이 기사에서는 왼쪽 및 오른쪽 화살표를 중심으로 JavaScript 및 jQuery에서 화살표 키를 바인딩하는 방법을 살펴보겠습니다.

표준 JavaScript 사용

가장 간단한 방법 바닐라 JavaScript에서 주요 이벤트를 처리하는 것은 document.onkeydown 이벤트 리스너를 통해 이루어집니다. 이 이벤트에 함수를 추가하면 키보드의 물리적 키에 해당하는 누른 키의 키 코드를 확인할 수 있습니다. 예는 다음과 같습니다.

<code class="js">document.onkeydown = function(e) {
  switch (e.which) {
    case 37: // Left arrow
      // Do something
      break;

    case 39: // Right arrow
      // Do something else
      break;
  }
  e.preventDefault(); // Prevent default behavior (like scrolling)
};</code>

jQuery 사용

jQuery는 이벤트 리스너를 바인딩하는 더 간결하고 편리한 방법을 제공합니다. 이전 접근 방식과 유사하게 keydown 이벤트를 사용하여 화살표 키 누름을 감지할 수 있습니다.

<code class="js">$(document).on("keydown", function(e) {
  switch (e.which) {
    case 37: // Left arrow
      // Do something
      break;

    case 39: // Right arrow
      // Do something else
      break;
  }
  e.preventDefault(); // Prevent default behavior (like scrolling)
});</code>

IE8 호환성

지원하지 않는 IE8과 같은 브라우저의 경우 이벤트 개체의 which 속성에 대해 다음 코드를 사용할 수 있습니다.

<code class="js">e = e || window.event;
switch (e.which || e.keyCode) {
  case 37: // Left arrow
    // Do something
    break;

  case 39: // Right arrow
    // Do something else
    break;
}</code>

키 코드에 대한 참고

여기에 사용된 키 코드(37 및 39)는 해당합니다. 왼쪽 및 오른쪽 화살표 키에 각각. 공식 JavaScript 또는 jQuery 문서 웹사이트에서 다른 키에 대한 키 코드를 찾을 수 있습니다.

Modern JavaScript

최신 버전의 JavaScript에서는 which 속성이 더 이상 사용되지 않습니다. KeyboardEvent.key를 선호합니다. 다음은 KeyboardEvent.key를 사용한 업데이트된 예입니다.

<code class="js">document.onkeydown = function(e) {
  switch (e.key) {
    case "ArrowLeft": // Left arrow
      // Do something
      break;

    case "ArrowRight": // Right arrow
      // Do something else
      break;
  }
  e.preventDefault(); // Prevent default behavior (like scrolling)
};</code>

이러한 메소드를 구현하면 특정 기능을 왼쪽 및 오른쪽 화살표 키에 쉽게 바인딩할 수 있어 애플리케이션에서 효율적인 키보드 상호 작용이 가능해집니다.

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