javascript 버튼 이벤트 (각 브 라 우 저 호 환)
js 로 키보드 기록 을 실현 하려 면 브 라 우 저의 세 가지 버튼 이벤트 유형, 즉 keydown, keypress 와 keyup 을 주목 해 야 합 니 다. 각각 onkeydown, onkeypress 와 onkeyup 세 가지 이벤트 핸들 에 대응 합 니 다.전형 적 인 버튼 은 이 세 가지 사건 을 모두 발생 시 킬 수 있 습 니 다. 키 다운, 키 프 레 스, 그리고 버튼 이 풀 릴 때의 키 업 입 니 다.
이 세 가지 이벤트 유형 중 키 다운 과 키 업 은 밑바닥 이 고 키 프레스 는 고 급 스 럽 습 니 다.여기 서 고급 이란 사용자 가 shift + 1 을 눌 렀 을 때 keypress 는 이 버튼 이 벤트 를 분석 한 후 인쇄 가능 한 '!' 문 자 를 되 돌려 주 는 것 을 말 합 니 다. keydown 과 keyup 은 shift + 1 이 벤트 를 기록 할 뿐 입 니 다.[1]
그러나 keypress 는 인쇄 할 수 있 는 문자 만 유효 하 며, 기능 버튼, 예 를 들 어 F1 - F12, Backspace, Enter, Escape, PageUP, PageDown 과 화살표 방향 등 은 keypress 사건 이 발생 하지 않 지만, keydown 과 keyup 사건 이 발생 할 수 있 습 니 다.그러나 FireFox 에서 기능 버튼 은 keypress 사건 을 일 으 킬 수 있다.
keydown, keypress, keyup 이벤트 핸들 에 전달 되 는 이벤트 대상 은 일반적인 속성 이 있 습 니 다.Alt, Ctrl 또는 Shift 가 하나의 버튼 과 함께 누 르 면 이벤트 의 altKey, ctrlKey, shiftKey 속성 을 통 해 이러한 속성 은 FireFox 와 IE 에서 통용 된다 는 것 을 나타 낸다.
두 번 째 부분: 호 환 브 라 우 저
브 라 우 저 와 관련 된 js 는 브 라 우 저 호 환 문 제 를 고려 해 야 한다.현재 자주 사용 되 는 브 라 우 저 는 주로 IE 기반 과 Mozilla 기반 두 가지 가 있 습 니 다.Maxthon 은 IE 커 널 을 기반 으로 하고 FireFox 와 Opera 는 Mozilla 커 널 을 기반 으로 한다.
2.1 이벤트 초기 화
먼저 이 사건 을 어떻게 초기 화 하 는 지 알 아야 합 니 다. 기본 문 구 는 다음 과 같 습 니 다.
function keyDown(){} document.onkeydown = keyDown;
브 라 우 저가 이 문 구 를 읽 을 때 키보드 의 어떤 키 를 눌 러 도 KeyDown () 함 수 를 호출 합 니 다.
2.2 FireFox 와 Opera 의 실현 방법
파이 어 폭 스 와 오페라 등 프로그램 이 IE 보다 번 거 롭 기 때문에 여기 서 먼저 설명 하 겠 습 니 다.
keyDown () 함수 에는 숨겨 진 변수 가 있 습 니 다. 일반적인 것 은 알파벳 'e' 를 사용 하여 이 변 수 를 표시 합 니 다.
function keyDown(e)
변수 e 는 키 이벤트 가 발생 했 음 을 표시 합 니 다. 어떤 키 가 눌 렸 는 지 찾 습 니 다. which 속성 을 사용 하 십시오:
e.which
e. which 는 이 키 의 색인 값 을 보 여 줍 니 다. 색인 값 을 이 키 의 알파벳 이나 숫자 값 으로 바 꾸 는 방법 은 정적 함수 String. from CharCode () 를 사용 해 야 합 니 다. 다음 과 같 습 니 다.
String.fromCharCode(e.which)
위의 문 구 를 함께 놓 으 면 우 리 는 FireFox 에서 누 른 키 가 무엇 인지 얻 을 수 있다.
function keyDown(e) {
var keycode = e.which;
var realkey = String.fromCharCode(e.which);
alert(" : " + keycode + " : " + realkey);
}
document.onkeydown = keyDown;
2.3 IE 의 실현 방법
IE 의 프로그램 은 e 변 수 를 필요 로 하지 않 습 니 다. e. which 대신 window. event. keyCode 를 사용 하여 키 의 색인 값 을 실제 키 로 바 꾸 는 방법 은 다음 과 같 습 니 다. String. from CharCode (event. keyCode), 프로그램 은 다음 과 같 습 니 다.
function keyDown() {
var keycode = event.keyCode;
var realkey = String.fromCharCode(event.keyCode);
alert(" : " + keycode + " : " + realkey);
}
document.onkeydown = keyDown;
2.4 브 라 우 저 유형 판단
각종 브 라 우 저 에서 버튼 이벤트 대상 을 가 져 오 는 방법 을 알 게 되 었 습 니 다. 그러면 브 라 우 저 유형 을 판단 해 야 합 니 다. 이 방법 은 매우 많 고 이해 하기 편리 하 며 교묘 한 방법 도 있 습 니 다. 먼저 일반적인 방법 을 말 하 겠 습 니 다. navigator 대상 의 app Name 속성 을 이용 하 는 것 입 니 다. 물론 userAgent 속성 도 사용 할 수 있 습 니 다.브 라 우 저 종 류 를 appname 으로 판단 합 니 다. IE 와 Maxthon 의 appname 은 "Microsoft Internet Explorer" 이 고 FireFox 와 Opera 의 appname 은 "Netscape" 이기 때문에 간단 한 기능 을 가 진 코드 는 다음 과 같 습 니 다.
function keyUp(e) {
if(navigator.appName == "Microsoft Internet Explorer")
{
var keycode = event.keyCode;
var realkey = String.fromCharCode(event.keyCode);
}else
{
var keycode = e.which;
var realkey = String.fromCharCode(e.which);
}
alert(" : " + keycode + " : " + realkey);
}
document.onkeyup = keyUp;
비교적 간결 한 방법 은 [2]:
function keyUp(e) {
var currKey=0,e=e||event;
currKey=e.keyCode||e.which||e.charCode;
var keyName = String.fromCharCode(currKey);
alert(" : " + currKey + " : " + keyName);
}
document.onkeyup = keyUp;
위의 이런 방법 은 비교적 교묘 하 니 간단하게 설명 하 자.
우선, e = e | | 이벤트;이 코드 는 브 라 우 저 이벤트 대상 이 가 져 온 호 환 을 위 한 것 입 니 다.js 에서 이 코드 는 FireFox 나 Opera 에 숨겨 진 변수 e 가 존재 한다 면 e | | event 는 e 로 돌아 가 고 IE 에 숨겨 진 변수 e 가 존재 하지 않 으 면 event 로 돌아 간 다 는 뜻 입 니 다.
그 다음으로 currKey = e. keyCode | e. which | e. charCode;이 문 구 는 브 라 우 저 버튼 이벤트 대상 의 버튼 코드 속성 (세 번 째 부분 참조) 을 호 환 하기 위 한 것 입 니 다. 예 를 들 어 IE 에 서 는 키 코드 속성 만 있 고 FireFox 에는 which 와 charCode 속성 이 있 으 며 Opera 에는 키 코드 와 which 속성 등 이 있 습 니 다.
상기 코드 는 브 라 우 저 만 호 환 되 고 keyup 이벤트 대상 을 가 져 왔 습 니 다. 버튼 코드 와 버튼 의 문 자 를 간단하게 팝 업 했 습 니 다. 그러나 문제 가 발생 했 습 니 다. 버튼 을 눌 렀 을 때 문자 키 는 대문자 이 고 shift 키 를 눌 렀 을 때 표시 되 는 문자 가 이상 하기 때문에 코드 를 최적화 해 야 합 니 다.
세 번 째 부분: 코드 실현 과 최적화
3.1 버튼 이벤트 의 버튼 코드 와 문자 코드
버튼 이벤트 의 버튼 코드 와 문자 코드 는 브 라 우 저 간 의 이식 성 이 부족 합 니 다. 서로 다른 브 라 우 저 와 서로 다른 이벤트 에 대해 서 는 버튼 코드 와 문자 코드 의 저장 방식 이 다 릅 니 다. IE 에 서 는 하나의 키 코드 속성 만 있 고 그 해석 은 사건 유형 에 달 려 있 습 니 다.키 다운 에 있어 키 코드 는 버튼 코드 를 저장 하고 키 프레스 이벤트 에 있어 키 코드 는 문자 코드 를 저장 합 니 다.IE 에는 which 와 charCode 속성 이 없 기 때문에 which 와 charCode 속성 은 항상 undefined 입 니 다.
FireFox 에서 keyCode 는 항상 0 이 고 시간 keydown / keyup 일 때 charCode = 0, which 는 버튼 코드 입 니 다.이벤트 keypress 시 which 는 charCode 와 같은 값 으로 문자 코드 를 저장 합 니 다.
Opera 에 서 는 keyCode 와 which 의 값 이 항상 같 습 니 다. keydown / keyup 이벤트 에 서 는 버튼 코드 를 저장 합 니 다. keypress 시간 에 문자 코드 를 저장 합 니 다. charCode 는 정의 되 지 않 고 undefined 입 니 다.
3.2 keydown / keyup 또는 keypress 로
첫 번 째 부분 에 서 는 keydown / keyup 과 keypress 의 차 이 를 소개 하 였 으 며, 비교적 통용 되 는 규칙 이 있 습 니 다. keydown 사건 은 기능 버튼 에 있어 서 가장 유용 하 며, keypress 사건 은 인쇄 가능 한 버튼 에 있어 서 가장 유용 합 니 다 [3].
키보드 기록 은 주로 인쇄 가능 한 문자 와 일부 기능 버튼 을 대상 으로 하기 때문에 keypress 가 최 우선 입 니 다. 그러나 첫 번 째 부분 에서 언급 한 바 와 같이 IE 에서 keypress 는 기능 버튼 을 지원 하지 않 기 때문에 keydown / keyup 이벤트 로 보충 해 야 합 니 다.
3.3 코드 의 전체적인 사 고 를 실현 하고 keypress 이벤트 대상 으로 버튼 문 자 를 가 져 오고 keydown 이벤트 로 기능 문 자 를 가 져 옵 니 다. 예 를 들 어 Enter, Backspace 등 입 니 다.
코드 는 다음 과 같다.
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
js
<br>var keystring = "";//
<br>function $(s){return document.getElementById(s)?document.getElementById(s):s;}
<br>function keypress(e)
<br>{
<br> var currKey=0,CapsLock=0,e=e||event;
<br> currKey=e.keyCode||e.which||e.charCode;
<br> CapsLock=currKey>=65&&currKey<=90;
<br> switch(currKey)
<br> {
<br> // 、 、 、 、 、
<br> case 8: case 9:case 13:case 32:case 37:case 38:case 39:case 40:case 46:keyName = "";break;
<br> default:keyName = String.fromCharCode(currKey); break;
<br> }
<br> keystring += keyName;
<br>}
<br>function keydown(e)
<br>{
<br> var e=e||event;
<br> var currKey=e.keyCode||e.which||e.charCode;
<br> if((currKey>7&&currKey<14)||(currKey>31&&currKey<47))
<br> {
<br> switch(currKey)
<br> {
<br> case 8: keyName = "[ ]"; break;
<br> case 9: keyName = "[ ]"; break;
<br> case 13:keyName = "[ ]"; break;
<br> case 32:keyName = "[ ]"; break;
<br> case 33:keyName = "[PageUp]"; break;
<br> case 34:keyName = "[PageDown]"; break;
<br> case 35:keyName = "[End]"; break;
<br> case 36:keyName = "[Home]"; break;
<br> case 37:keyName = "[ ]"; break;
<br> case 38:keyName = "[ ]"; break;
<br> case 39:keyName = "[ ]"; break;
<br> case 40:keyName = "[ ]"; break;
<br> case 46:keyName = "[ ]"; break;
<br> default:keyName = ""; break;
<br> }
<br> keystring += keyName;
<br> }
<br> $("content").innerHTML=keystring;
<br>}
<br>function keyup(e)
<br>{
<br> $("content").innerHTML=keystring;
<br>}
<br>document.onkeypress=keypress;
<br>document.onkeydown =keydown;
<br>document.onkeyup =keyup;
<br>
：
코드 분석:
$(): ID 에 따라 dom 가 져 오기
keypress (e): 문자 코드 에 대한 캡 처 를 실현 합 니 다. 기능 버튼 은 keydown 으로 가 져 와 야 하기 때문에 keypress 에서 이 기능 버튼 을 차단 합 니 다.
keydown (e): 기능 버튼 을 가 져 왔 습 니 다.
keyup (e): 캡 처 한 문자열 을 보 여 줍 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
