>웹 프론트엔드 >프런트엔드 Q&A >JavaScript에는 여러 가지 키보드 이벤트가 있습니다.

JavaScript에는 여러 가지 키보드 이벤트가 있습니다.

青灯夜游
青灯夜游원래의
2022-02-17 18:15:043673검색

Javascript에는 세 가지 유형의 키보드 이벤트가 있습니다. 1. 키보드에서 특정 키를 눌렀을 때 발생하는 keydown 이벤트 2. 특정 키보드 키를 눌렀다 놓을 때 발생하는 keypress 이벤트 , 특정 키보드 키를 눌렀을 때 트리거됩니다.

JavaScript에는 여러 가지 키보드 이벤트가 있습니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

JavaScript에서는 사용자가 키보드를 조작할 때 키보드 이벤트가 트리거됩니다.

키보드 이벤트에는 주로 다음 3가지 유형이 포함됩니다.

  • keydown: 키보드에서 키를 누를 때 트리거됩니다. 키를 누르고 있으면 이 이벤트가 계속해서 발생하지만 Opera 브라우저는 이 연속 작업을 지원하지 않습니다. 이벤트 핸들러가 false를 반환하면 기본 동작(예: 키보드 문자 입력, IE 및 Safari 브라우저의 키 누르기 이벤트 응답)이 취소됩니다. keydown:在键盘上按下某个键时触发。如果按住某个键,会不断触发该事件,但是 Opera 浏览器不支持这种连续操作。该事件处理函数返回 false 时,会取消默认的动作(如输入的键盘字符,在 IE 和 Safari 浏览器下还会禁止keypress 事件响应)。

  • keypress:按下某个键盘键并释放时触发。如果按住某个键,会不断触发该事件。该事件处理函数返回 false 时,会取消默认的动作(如输入的键盘字符)。

  • keyup

keypress: 키보드 키를 눌렀다 놓을 때 트리거됩니다. 키를 누르면 이 이벤트가 계속해서 트리거됩니다. 이벤트 핸들러가 false를 반환하면 기본 동작(예: 입력된 키보드 문자)이 취소됩니다.

keyup: 키보드 키를 놓으면 트리거됩니다. 이 이벤트는 키보드를 놓을 때 한 번만 트리거되며 지속적인 응답 상태가 아닙니다.

사용자가 누르고 있는 키 코드를 얻을 때 keydown, keypress 및 keyup 이벤트를 사용하여 이 정보를 얻을 수 있습니다. keydown 및 keypress 이벤트는 기본적으로 동의어 이벤트이며 성능은 완전히 동일합니다. 그러나 일부 브라우저에서는 키 누르기 이벤트를 사용하여 키 정보를 얻는 것을 허용하지 않습니다. 모든 요소는 키보드 이벤트를 지원하지만 키보드 이벤트는 주로 폼 입력에 사용됩니다.

Example

다음 예시는 실시간으로 키보드 조작의 다양한 세부사항, 즉 키보드 응답 이벤트 유형과 해당 키 값을 캡처합니다.
<textarea id="key"></textarea>
<script>
    var key = document.getElementById("key");
    key.onkeydown =f;  //注册keydown事件处理函数
    key.onkeyup = f;  //注册keyup事件处理函数
    key.onkeypress = f;  //注册keypress事件处理函数
    function f (e) {
        var e = e || window.event;  //标准化事件处理
        var s = e.type + " " + e.keyCode;  //获取键盘事件类型和按下的值
        key.value = s;
    }
</script>
키보드 이벤트 속성키보드 이벤트에 의해 정의된 속성AttributesDescriptionkeyCode이 속성은 키보드에 있는 해당 키의 키 값을 포함합니다.charCode이 속성은 다음의 키 값을 포함합니다. 키보드의 해당 키 유니코드 인코딩, DOM만 지원 target이벤트가 발생하는 노드(요소 포함), DOM만 지원 srcElement이벤트가 발생하는 요소, IE만 지원 shiftKey눌렀는지 여부 Shift 키를 눌렀으면 true를 반환하고, 그렇지 않으면 false입니다.ctrlKey Ctrl 키를 눌렀는지 여부를 누르고 있으면 true를 반환하고, 그렇지 않으면 false를 반환합니다. falsemetaKeyMtea 키를 눌렀는지 여부에 관계없이 눌려지면 true를 반환하고, 그렇지 않으면 false, DOM만 지원
키보드는 아래 표와 같이 다양한 속성을 정의합니다. 이러한 속성을 사용하여 키보드 작업을 정확하게 제어할 수 있습니다. 키보드 이벤트 속성은 일반적으로 키보드 관련 이벤트가 발생할 때 이벤트 객체에만 존재합니다. 단, ctrlKey 및 ShiftKey 속성은 수분 보유 이벤트에 존재할 수 있기 때문입니다. 예를 들어 Ctrl 또는 Shift 키를 누르면 마우스 클릭이 발생합니다.

【관련 권장사항: javascript 학습 튜토리얼

🎜

위 내용은 JavaScript에는 여러 가지 키보드 이벤트가 있습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.