웹사이트 개발자는 독자가 어떤 방식으로든 웹사이트와 상호 작용하기를 원합니다. 방문자는 페이지를 위아래로 스크롤하고, 입력 필드에 글을 쓰고, 링크를 클릭하여 다른 페이지에 액세스하거나, 키 조합을 눌러 특정 작업을 실행할 수 있습니다. 개발자는 이러한 모든 이벤트를 캡처하고 사용자에게 필요한 기능을 제공할 수 있어야 합니다.
이 튜토리얼에서는 JavaScript에서 키보드 이벤트를 처리하는 데 중점을 둡니다. 다양한 유형의 키보드 이벤트, 특수 키 이벤트 처리, 누르거나 떼는 키에 대한 정보 가져오기에 대해 알아봅니다.
키보드 이벤트는 세 가지 유형으로 구분됩니다. 이것을 keydown
、keypress
和 keyup
이라고 합니다.
키를 누르고 있는 동안 keydown
事件。所有键都会被触发。它们是否产生角色价值并不重要。例如,按键盘上的 A 或 Alt 键将触发 keydown
이벤트가 실행됩니다.
keypress
事件已弃用。它仅在按下产生字符值的键时触发。例如,按 A 键将触发此事件,但按 Alt 键则不会。您应该考虑使用 keydown
교체해드리는 이벤트입니다.
keyup
이벤트는 사용자가 누른 키를 놓으면 트리거됩니다.
사용자가 키보드의 아무 키나 계속 누르고 있다고 가정해 보겠습니다. 이 경우 keydown
이벤트가 반복적으로 실행됩니다. 사용자가 키를 놓으면 keydown
事件将被重复触发。一旦用户释放密钥,就会触发 keyup
이벤트가 시작됩니다.
이 시점에서 나는 상당히 분명한 사실을 언급하고 싶습니다. 키보드는 사용자로부터 입력을 받는 데 사용되는 입력 장치입니다. 우리는 해당 의견을 바탕으로 조치를 취합니다. 그러나 사용자가 입력을 보내는 다른 방법이 있습니다.
사용자가 양식에 작성하는 입력 필드를 추적하려면 해당 입력에 다른 이벤트(예: change
)를 사용하는 것이 더 합리적입니다.
또한 키보드 이벤트는 포커스를 받을 수 있는 요소에 대해서만 생성됩니다. 여기에는 <input>
元素、<textarea></textarea>
元素、<summary></summary>
元素以及具有 contentEditable
或 tabindex
속성이 있는 다른 요소가 포함됩니다.
예를 들어 tabindex
또는 contentEditable
속성을 설정하지 않으면 단락 요소에서 키보드 이벤트를 들을 수 없습니다. 그러나 결국 DOM 트리가 버블링되므로 keydown
또는 tabindex
或 contentEditable
属性,否则您将无法侦听段落元素上的键盘事件。但是,它最终会在 DOM 树中冒泡,因此您仍然可以将 keydown
或 keyup
이벤트 리스너를 문서에 연결할 수 있습니다.
예는 다음과 같습니다.
으아악콜백을 화살표 함수로 제공할 수도 있습니다.
으아악이전 섹션의 기본 코드 조각에서는 콜백 함수를 정의했습니다. 이 함수는 이벤트
개체를 인수로 받아들입니다. 이 이벤트
개체에는 keydown
또는 event
对象作为其参数。此 event
对象包含您可能需要访问的与 keydown
或 keyup
이벤트와 관련하여 액세스해야 할 수 있는 모든 정보가 포함되어 있습니다.
다음은 여러분이 알아야 할 몇 가지 유용한 속성입니다:
key
: 이 속성은 누른 키의 문자 값을 나타내는 문자열을 반환합니다. code
: 이 속성은 누른 실제 키의 코드를 나타내는 문자열을 반환합니다. repeat
repeat
:如果长时间按住某个键,该属性将返回布尔值 true
,导致 keydown
: 키를 오랫동안 누르면 이 속성은 부울 값 true
를 반환하여 keydown
이벤트를 발생시킵니다. 여러 번 트리거되었습니다. altKey
altKey
:如果用户按下 Alt 键(在 Windows 上)或 Option 键(在在 macOS 上)当 keydown
: keydown
이벤트가 발생할 때 사용자가 ctrlKey
:如果用户在 keydown
事件触发时按下 Control 键,则此属性返回布尔值 true
키(macOS)를 누르는 경우. ctrlKey
metaKey
:如果用户在 keydown
事件触发时按下 Meta 键,则此属性返回布尔值 true
: keydown
이벤트가 발생할 때 사용자가 true
를 반환합니다.
shiftKey
:如果用户在 keydown
事件触发时按下 Shift 键,则此属性返回布尔值 true
metaKey
keydown
이벤트가 발생할 때 사용자가 Metakeydown
事件被触发时”部分。这意味着,如果在执行上述任一操作时按下 A 或 3 等键,这些属性的值将为 true
,用于 keydown
키를 누르면 이 속성은 부울 값 true
를 반환합니다.
shiftKey
🎜: 이 속성은 keydown
이벤트가 발생할 때 사용자가 🎜Shift🎜 키를 누르면 부울 값 true
를 반환합니다. 🎜
🎜
🎜마지막 네 가지 속성 설명 모두에 "keydown
이벤트가 발생하는 경우" 부분이 포함되어 있음을 알 수 있습니다. 즉, 위 작업을 수행하는 동안 🎜A🎜 또는 🎜3🎜과 같은 키를 누르면 keydown
에 대해 이러한 속성 값이 true
가 됩니다. 이벤트 . 키도 눌러집니다. 🎜
🎜아래 CodePen 데모에 집중한 후 개별 키나 키 조합을 눌러 다양한 속성의 값이 변경되는 것을 확인해 보세요. 🎜
如果您按键盘顶部的 3 键而不按 Shift 键,则 key
属性的值将变为 3 > 并且 code
属性的值变为 Digit3。但是,按下 Shift 后,key
属性的值将变为 #,而 code
属性仍为 Digit3。
您可以尝试使用其他组合键进行相同的操作,您会注意到 key
属性的值会根据您按下的键而变化。但是,code
属性的值保持不变。
键盘上的某些键通常是重复的。例如,有两个 Shift 键。按左键会将 code
的值设置为 ShiftLeft
。按右边会将 code
的值设置为 ShiftRight
。同样,有两组数字键。字母上方的代码将为您提供 Digit<number></number>
代码,而数字键盘上的代码将为您提供 Numpad<number></number>
代码。
这意味着,如果您的代码依赖于检测特定键,则务必确保您使用 code
属性来检查按下了哪个键。
我想提的另一件重要的事情是,并不是每个人都使用 QWERTY 键盘,而且他们的键盘甚至可能不是英文的。在这种情况下,使用 key
属性来检查按下了哪个键很容易出错。
现在我们知道了如何监听键盘事件并从中提取信息,我们可以编写一些代码来对某些特定键的 keydown
和 keyup
事件做出反应。考虑以下代码片段:
const circle = document.querySelector(".circle"); document.addEventListener("keydown", (event) => { if (event.code == "KeyR" && event.repeat != true) { let rVal = Math.floor(200 + Math.random() * 200); circle.setAttribute("style", `width: ${rVal}px; height: ${rVal}px;`); } if (event.key == "B" && event.shiftKey == true) { let rVal = Math.floor(10 + Math.random() * 40); circle.setAttribute("style", `border: ${rVal}px solid orangered;`); } if (event.code == "ArrowUp" && event.repeat != true) { circle.classList.add("animate__animated", "animate__bounce"); } }); document.addEventListener("keyup", (event) => { if (event.code == "ArrowUp") { setTimeout(() => { circle.classList.remove("animate__animated", "animate__bounce"); }, 4000); } });
我们为 keydown
事件创建了一个侦听器,并为 keyup
事件创建了另一个侦听器。这两个事件都附加到 document
。
在 keydown
内,我们检查三个不同的密钥。我使用了 R 键的 event.code
属性来向您展示您可以单独按 R 键或与任何修饰键组合使用,并且它仍会将圆的半径更改为随机值。另一方面,我们使用 event.key
属性来检查其值是否为 B。仅当您同时按 Shift 和 B 时,此块中的代码才会执行,因为这种组合会导致 event.key
属性成为大写“B”。
在 keyup
内,我们检查 ArrowUp
键上的 keyup
事件。一旦钥匙被解除,我们会在四秒的延迟后删除之前附加的类。
以下 CodePen 演示展示了这一切的实际效果:
您应该尝试在上述代码中添加自己的逻辑,以便当用户按下A、S、W键时圆圈会移动> 和D。
在本教程中,我们学习了 JavaScript 中键盘事件的基础知识。按下并释放键盘上的按键将分别触发 keydown
和 keyup
事件。与这些事件关联的 event
对象包含您确定按下了哪个键并采取适当操作所需的所有信息。
请记住,键盘只是众多可能的输入设备之一。因此,使用键盘检测任何输入可能并不总是能达到预期效果。在这种情况下,您应该考虑使用与输入相关的事件。
위 내용은 JavaScript: 키보드 이벤트 처리 마스터하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!