키보드 제어 이벤트 적용 튜토리얼_기본지식

키보드 제어 이벤트를 얻는 것은 상호 작용을 달성하는 가장 강력한 방법 중 하나입니다.

가장 먼저 알아야 할 것은 이벤트를 초기화하는 방법입니다. 기본 명령문은 다음과 같습니다.

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 변수가 필요하지 않습니다. e.which 대신 window.event.keyCode를 사용합니다. 키 인덱스 값을 실제 키 값으로 변환하는 방법은 비슷합니다. .keyCode), 프로그램은 다음과 같습니다:

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

둘 다에 적합한 프로그램

2개 사용 확인 위의 예제를 브라우저로 실행해 보면 실행 결과가 항상 동일하지 않다는 것을 알 수 있는데, 이는 두 브라우저의 키보드 코드 설정이 다르기 때문에 이 프로그램을 별도로 작성하려면 별도의 코드를 사용해야 한다는 점입니다. 다른 방법은 없습니다.

실제 키 값은 완전히 잊어버리고 키보드 코드 값으로만 ​​작업하는 것이 좋습니다. 다음 프로그램은 상황에 따라 설정됩니다. IE를 사용하는 경우에는 ieKey가 적용되고 nKey는 0으로 설정됩니다. Netscape를 사용하는 경우 nKey가 적용되고 nKey는 0으로 설정됩니다. 값:

function 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 문을 삽입하세요.

function Slide() {
if (myobj.active) {
myobj.xpos = 5
myojb.left = myobj.xpos
setTimeout("slide()", 30)
　}
}

이 경우 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
}

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

function init( ) {
if (ns4) block = document.blockDiv
if (ie4) block = blockDiv.style
block.xpos =parseInt(block.left)
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; var nKey=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; var nKey=0}
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)
}
}