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

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

1. 마우스 이벤트:

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

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

             함수 핸들(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 = 핸들;
            }
> >               

상자 내용물
~                                                

>


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

코드 복사

코드는 다음과 같습니다.               기능 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(키를 놓을 때 트리거됨)

키보드 모니터링 예시:

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

             함수 핸들(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입니다.

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

코드 복사

코드는 다음과 같습니다.

             함수 핸들(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 이벤트는 다음과 같습니다.

load 이벤트는 일반적으로 사용되는 이벤트 중 하나입니다. 페이지가 로드되기 전에는 DOM 프레임워크가 빌드되지 않아 관련 작업이 발생할 수 없기 때문입니다.

창 개체에 로드를 할당하면 unload 이벤트는

태그의 onload 및 onunload 메서드와 동일합니다.