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

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

青灯夜游

풀어 주다： 2022-02-17 18:15:04

원래의

3649명이 탐색했습니다.

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만 지원