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

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

Feb 17, 2022 pm 06:15 PM
javascript키보드 이벤트

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으로 문의하세요.
usestate () 이해 : 국가 관리에 대한 포괄적 인 안내서usestate () 이해 : 국가 관리에 대한 포괄적 인 안내서Apr 25, 2025 am 12:21 AM

usestate () isareacthookusedtomanagestatefunctionalcomponents.1) itinitializesandupdatesstate, 2) workaledtthetThetThepleFcomponents, 3) canleadto'Stalestate'ifnotusedCorrecrally 및 4) performancanoptimizedUsecandusecaldates.

React 사용의 장점은 무엇입니까?React 사용의 장점은 무엇입니까?Apr 25, 2025 am 12:16 AM

Reactispopularduetoitscomponent 기반 아카데입, 가상, Richcosystem 및 declarativenature.1) 구성 요소 기반 ectureallowsforeusableuipieces, Modularityandmainability 개선 가능성.

React의 디버깅 : 일반적인 문제를 식별하고 해결합니다React의 디버깅 : 일반적인 문제를 식별하고 해결합니다Apr 25, 2025 am 12:09 AM

TodebugreactApplicationseffective, UsetheseStradegies : 1) 주소 propdrillingwithContapiorredux.2) handleaSnchronousOperationswithUsestAndUseefect, abortControllerTopReceConditions.3) 최적화 formanceSeMoAnduseCalbackTooid

React의 usestate () 란 무엇입니까?React의 usestate () 란 무엇입니까?Apr 25, 2025 am 12:08 AM

usestate () inreactAllowsStateManagementInfunctionalComponents.1) itsimplifiessTatemanagement, 2) usethepRevCountFunctionToupDatesTestateSpreviousValue, PropeingStaleScallanceBackferperperperperperperperperperperperperpertoptiMizatio

usestate () vs. usereducer () : 주 요구에 맞는 올바른 후크 선택usestate () vs. usereducer () : 주 요구에 맞는 올바른 후크 선택Apr 24, 2025 pm 05:13 PM

chelectionSimple, IndependentStateVaribles; useUserEducer () useuserEducer () forcomplexStateLogicor () whenStatedSonpreviousState.1) usestate () isidealforsimpleupdatesliketogglingabooleorupdatingacounter.2) usbetterformanagingmentiplesub-vvalusorac

usestate ()로 상태 관리 : 실용적인 자습서usestate ()로 상태 관리 : 실용적인 자습서Apr 24, 2025 pm 05:05 PM

Usestate는 클래스 구성 요소 및 기타 상태 관리 솔루션보다 우수합니다. 국가 관리를 단순화하고 코드를 더 명확하게하고 읽기 쉽고 React의 선언적 특성과 일치하기 때문입니다. 1) Usestate는 함수 구성 요소에서 상태 변수를 직접 선포 할 수있게합니다. 2) 후크 메커니즘을 통해 다시 렌더링하는 동안 상태를 기억합니다.

usestate ()를 사용하고 대체 상태 관리 솔루션을 고려할 때usestate ()를 사용하고 대체 상태 관리 솔루션을 고려할 때Apr 24, 2025 pm 04:49 PM

useUsestate () forlocalcomponentStateManagement; 고려 사항 forglobalstate, complexlogic, orperformanceissues.1) usestate () isidealforsimple, localstate.2) useglobalstatesolutionslikereduxorcontextforsharedstate.3) optforredooxtoolkitormobxcomcoccomcoccomcoccomcoccomcoccomcoccomcoccomcoccomporccomcoccomporccomcoccomport

React의 재사용 가능한 구성 요소 : 코드 유지 관리 및 효율성 향상React의 재사용 가능한 구성 요소 : 코드 유지 관리 및 효율성 향상Apr 24, 2025 pm 04:45 PM

reusablecomponentsinreacececodemainabenabilityandefficiency는 hallowingesamecomponentacrossdifferentpartsofanapplicationorprojects.1) 그들을 retuduceredundancyandsimplifyupdates.2) theyseconsistencyinuserexperience.3) theyquireoptim

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

ZendStudio 13.5.1 맥

ZendStudio 13.5.1 맥

강력한 PHP 통합 개발 환경

SublimeText3 영어 버전

SublimeText3 영어 버전

권장 사항: Win 버전, 코드 프롬프트 지원!

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

WebStorm Mac 버전

WebStorm Mac 버전

유용한 JavaScript 개발 도구