DOM 기본 튜토리얼 이벤트 유형_기본 지식-JS 튜토리얼-php.cn

DOM 기본 튜토리얼 이벤트 유형_기본 지식

WBOY

풀어 주다： 2016-05-16 16:18:51

원래의

1029명이 탐색했습니다.

사용자 이벤트 유형의 경우 가장 일반적으로 사용되는 것은 마우스, 키보드, 브라우저입니다.

1. 마우스 이벤트:

마우스 이벤트가 자주 사용됩니다. 다음 예제에서는 다양한 마우스 이벤트를 테스트합니다

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

<스크립트 언어="javascript">
             함수 핸들(oEvent) {
var disp = document.getElementById("display");
> > if (window.event) oEvent = window.event; //호환성 처리 및 객체 획득
                   disp.innerHTML = "마우스 이벤트 이름:" oEvent.type "
";
            }
               window.onload = function() {
var oP = document.getElementById("box");
oP.onmousedown = 처리;
oP.onmouseover = 처리;
oP.onmouseup = 처리;
oP.onmouseout = 처리;
oP.onclick = 핸들;
oP.ondblclick = 핸들;
            }
> >

상자 내용물
~

>

마우스 키값 버튼 테스트(비교표 포함)

코드 복사

코드는 다음과 같습니다. <스크립트 언어="javascript"> 기능 TestClick(oEvent) {

var oDiv = document.getElementById("display");

If(window.event)
oEvent = window.event;
                   oDiv.innerHTML = oEvent.button //버튼 값 출력
            }
               document.onmousedown = TestClick;
              window.onload = TestClick //아무 키도 누르지 않았는지 테스트
> >

2. 키보드 이벤트

키보드 이벤트 종류는 많지 않고, 이벤트 종류는 3가지 뿐입니다.

keydown(키를 누르고 있으면 계속 트리거됨)

키 누르기(키를 누르고 문자가 생성될 때 트리거됩니다. 즉, Shift, Alt, Ctrl 등과 같은 기능 키는 무시됩니다.)

keyup(키를 놓을 때 트리거됨)

키보드 모니터링 예시:

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

<스크립트 언어="javascript">
             함수 핸들(oEvent) {
If (window.event) oEvent = window.event; // 처리 호환성, 이벤트 객체 획득
var oDiv = document.getElementById("display");
                  oDiv.innerHTML = oEvent.type " " //이벤트 이름 출력
            }
               window.onload = function() {
var oTextArea = document.getElementById("textin");
                    oTextArea.onkeydown = //모든 키보드 이벤트 듣기
oTextArea.onkeyup = 처리;
oTextArea.onkeypress = 핸들;
            }
> >
~

>

키보드의 경우 가장 중요한 것은 이벤트 이름이 아니라 어떤 키를 눌렀는지 입니다. IE에는 charCode 속성이 없고 keydown 및 keyup 이벤트가 발생할 때만 keyCode가 표준 DOM 키코드와 동일하므로

keypress 이벤트의 키코드와 동일하므로 다음과 같은 방법을 사용합니다.

코드 복사

코드는 다음과 같습니다.oEvent.charCode = (oEvent.type == "keypress) ")? oEvent.keycode:();

keyCode를 사용하지 않는 이유는 출력 문자가 아닌 키보드 키를 나타내기 때문입니다. 따라서 "a"와 "A"를 출력할 때 키코드는 동일하며, 문자코드로 구분됩니다.

또한 키 누르기에서 표준 DOM의 키코드 값은 항상 0입니다.

예: 키보드 이벤트 관련 속성:

코드 복사

코드는 다음과 같습니다.

<스크립트 언어="javascript">
             함수 핸들(oEvent) {
var oDiv = document.getElementById("display");
If (window.event) oEvent = window.event; // 처리 호환성, 이벤트 객체 획득
//즉, charcode 값 설정
oEvent.charCode = (oEvent.type == "keypress") ? oEvent.keyCode : 0;
oDiv.innerHTML = oEvent.type "：charCode" oEvent.charCode "keyCode" oEvent.keyCode "
" //출력 테스트
            }
               window.onload = function() {
var oTextArea = document.getElementById("textin");
                    oTextArea.onkeydown = //모든 키보드 이벤트 듣기
oTextArea.onkeypress = 핸들;
            }
> >
~

>

3.htm 이벤트

브라우저의 경우 다양한 HTML 이벤트에는 고유한 이벤트가 있으며, 그 중 일부는 로드, 오류, 선택 등 사용자가 자주 접하게 됩니다. 일반적으로 사용되는 HTML 이벤트는 다음과 같습니다.