javascript_javascript 스킬의 키보드 제어 이벤트에 대한 설명

캐리지 리턴 포커스 문제 제어:

코드 복사 코드는 다음과 같습니다.

가장 먼저 알아야 할 것은 이벤트를 초기화하는 방법입니다. 기본 구문은 다음과 같습니다.
　 document .onkeydown = keyDown
브라우저가 이 구문을 읽으면 키보드의 어떤 키를 눌러도 KeyDown() 함수가 호출됩니다.
키보드 이벤트를 캡처하는 것은 브라우저마다 약간 어렵습니다. 브라우저마다 구현문을 별도로 알아 보겠습니다.
Netscape
Netscape의 프로그램 구현은 IE보다 더 까다롭습니다. Netscape가 항상 키 입력 이벤트를 확인하도록 하려면 이 명령문이 없으면 키 입력 이벤트가 마우스 누르기 이벤트와 혼동됩니다. 특수 명령문은 다음과 같습니다:
Document.onkeydown = keyDown
if (ns4) document.captureEvents(Event.KEYDOWN)
keyDown() 함수에는 숨겨진 변수가 있습니다. 일반적으로 문자 "를 사용합니다. e"는 이 함수를 나타냅니다.
함수 keyDown(e)
변수 e는 누른 키를 찾습니다.
e.which
이는 키의 인덱스 값을 제공합니다. 인덱스 값을 키의 영숫자 값으로 변환하고 다음과 같이 작성합니다.
String.fromCharCode(e.which)
위의 명령문을 종합하면 어떤 키를 눌렀는지 알 수 있습니다.

코드 복사 코드는 다음과 같습니다.

function keyDown(e) {
var keycode = e .which
var realkey = String.fromCharCode(e.which)
Alert("keycode: " keycode " realkey: " realkey)
}
document.onkeydown = keyDown
document.captureEvents(Event.KEYDOWN )

Internet Explorer
IE 프로그램은 Netscape와 유사하지만 e.which 대신 window.event.keyCode를 사용하여 인덱스 값을 변경할 수 있습니다. 실제 키 값으로 변환하는 방법은 String.fromCharCode(event.keyCode)와 유사하며 프로그램은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

function keyDown() {
var keycode = event.keyCode
var realkey = String.fromCharCode(event.keyCode)
Alert("keycode: " keycode " realkey: " realkey)
}
document.onkeydown = keyDown
document.onkeydown = keyDown

　 두 절차
확인 위의 예를 두 브라우저에서 모두 실행해보면 실행 결과가 항상 동일하지 않다는 것을 알 수 있는데 이는 두 브라우저의 키보드 코드 설정이 다르기 때문에 이 프로그램을 별도로 작성하려면 별도의 코드를 사용해야 한다는 점입니다. 다른 방법은 없습니다.
실제 키 값은 완전히 잊어버리고 키보드 코드 값으로만 ​​작업하시는 것을 권장합니다. 다음 프로그램은 상황에 따라 설정됩니다. IE를 사용하는 경우에는 ieKey가 적용되고 nKey는 0으로 설정됩니다. Netscape를 사용하는 경우 nKey가 적용되고 nKey는 0으로 설정됩니다. 값:

코드 복사 코드는 다음과 같습니다.

함수 keyDown(e) {
if (ns4) {
var nKey=e.which;
var ieKey=0
}
if (ie4) {
var ieKey=event. keyCode;
var nKey=0
　}
　alert("nKey:" nKey " ieKey:" ieKey)
}
document.onkeydown = keyDown
if (ns4) document. CaptureEvents(Event.KEYDOWN)

키보드를 사용하여 객체 이동
다음 프로그램은 키보드를 사용하여 객체 이동을 구현합니다. 프로그램은 어떤 키가 눌렸는지 확인하고 해당 함수를 호출하여 객체를 이동합니다. 물체. 이 예에서는 문자 "A"를 누르면 객체가 움직이기 시작합니다. nKey의 문자 "A" 키 값은 97이고, ieKey의 값은 65입니다. 이 두 값은 다음과 같습니다. 프로그램에서 별도로 확인합니다.

코드 복사 코드는 다음과 같습니다.

함수 init() {
if (ns4) block = document.blockDiv
if (ie4) block = blockDiv.style
block.xpos = parseInt(block.left)
Document.onkeydown = keyDown
if (ns4) document.captureEvents(Event.KEYDOWN)
}
function keyDown(e) {
if (ns4) { var nKey=e.which; ieKey=0 }
if (ie4) { var ieKey=event.keyCode; var nKey=0 }
if (nKey==97 || ieKey==65) { // "A" 키가 Pressed
　slide()
　}
}
function Slide() {
　block.xpos = 5
　block.left = block.xpos
　status = block.xpos / / 이 문장은 반드시 필요한 것은 아니며 단지 상태를 확인하기 위한 것입니다
SetTimeout("slide()",30)
}

"Active" 변수를 추가합니다
위의 내용은 프로그램이 조금 부족한데, 한번 움직이면 멈출 수 없고, A 키를 몇 번 더 누르면 물체가 점점 더 빠르게 움직이는 현상을 수정하겠습니다.
이 상황을 변경하려면 "active" 변수를 사용하고, 함수가 반복되는지 확인하려면 if 문을 삽입하세요.

코드 복사 코드는 다음과 같습니다.

함수 슬라이드() {
if (myobj.active) {
myobj. > 이 경우 myobj.active 값이 true인 경우에만 Slide() 함수가 작동합니다.
onKeyUp 및 "Active" 변수 사용
onkeyup 이벤트는 onkeydown 이벤트와 동일하게 작동합니다. 다음 명령문을 사용하여 이벤트를 초기화합니다.

코드 복사


코드는 다음과 같습니다.

　 document.onkeydown = keyDown document.onkeyup = keyUp if (ns4) document.captureEvents(Event. KEYDOWN | Event.KEYUP)

keyUp() 함수는 동일합니다. 키를 놓으면 이벤트가 시작되고 개체가 이동을 멈추고 활성 변수가 0으로 설정됩니다. 🎜>

코드 복사

코드는 다음과 같습니다.

　function keyUp(e) { 　if (ns4) var nKey = e.which if (ie4) var ieKey = window.event.keyCode if (nKey==97 || ieKey==65) block.active = false }

다음은 비교적 완전한 프로그램입니다.




코드 복사

코드는 다음과 같습니다. :

함수 init() { if (ns4) block = document.blockDiv if (ie4) block = blockDiv.style block.xpos = parseInt(block. 왼쪽) block.active = false document.onkeydown = keyDown

　document.onkeyup = keyUp

　if (ns4) document.captureEvents(Event.KEYDOWN | Event.KEYUP)
}
function keyDown(e) {
　if (ns4) {var nKey=e.which; var ieKey=0}
　if (ie4) {var ieKey=event.keyCode=0}
　if ((nKey==97 || ieKey==65) && ! block.active) { // "A" 키를 누른 경우
　block.active = true 슬라이드()
　}
}
function keyUp(e) {
　if (ns4) { var nKey=e.which; var ieKey=0}
　if (ie4) {var ieKey=event.keyCode; 🎜>if (nKey==97 || ieKey==65) {
block.active = false // "A" 키가 해제된 경우
}
}
function Slide() {
if (block.active) {
block.xpos = 5
block.left = block.xpos
status = block.xpos // 필요하지 않음, 단지 표시용
setTimeout("slide ()",30)
}
}