사용자 이벤트 유형의 경우 가장 일반적으로 사용되는 것은 마우스, 키보드 및 브라우저입니다.
1. 마우스 이벤트 :
모든 마우스 이벤트는 자주 사용됩니다. 다음 예제는 다양한 마우스 이벤트를 테스트하는 데 사용됩니다.
코드 사본은 다음과 같습니다.
<script language = "javaScript">
함수 핸들 (oevent) {
var disp = document.getElementById ( "display");
if (window.event) oevent = window.event; // 호환성을 처리하고 객체를 얻습니다
disp.innerhtml + = "마우스 이벤트 이름 :" + oevent.type + "<br>";
}
Window.onload = function () {
var op = document.getElementById ( "box");
op.onmousedown = 핸들;
op.onmouseover = 핸들;
op.onmouseup = 핸들;
op.onmouseout = 핸들;
op.onclick = 핸들;
op.ondblClick = 핸들;
}
</스크립트>
<div>
<div id = "box">
상자 내용
</div>
<p id = "display"> </p>
</div>
마우스 키 값 버튼 테스트 (참조 테이블 포함)
코드 사본은 다음과 같습니다.
<script language = "javaScript">
기능 testClick (oevent) {
var odiv = document.getElementById ( "display");
if (window.event)
Oevent = Window.event;
odiv.innerhtml += oevent.button; // 버튼 값을 출력합니다
}
document.onmousedown = testClick;
Window.onload = testClick; // 테스트가 키를 누르지 않았습니다
</스크립트>
<div>
<p id = "display"> </p>
</div>
2. 키보드 이벤트
키보드 이벤트에는 여러 가지 유형이 없으며 세 가지 유형의 이벤트 만 있습니다.
Keydown (키를 누르고, 누르고 누락을 계속합니다) 계속 트리거됩니다)
Keypress (키를 누르고 문자가 생성 될 때 트리거됩니다. 즉, Shift, Alt, Ctrl과 같은 기능 키를 무시합니다)
Keyup (키가 릴리스 될 때 트리거)
키보드 청취 예 :
코드 사본은 다음과 같습니다.
<script language = "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 = 핸들;
}
</스크립트>
<div>
<textArea rows = "4"cols = "50"id = "textin">
</textarea>
<p id = "display"> </p>
</div>
키보드의 경우 가장 중요한 것은 이벤트의 이름이 아니라 어떤 키를 누릅니다. IE에는 CharCode 속성이 없으므로 키 코드는 키 다운 및 키 업 이벤트가 발생할 때만 표준 DOM 키 코드와 동일합니다.
Keypress 이벤트에서는 다음 방법이 사용됩니다.
코드 사본은 다음과 같습니다. Oevent.charcode = (oevent.type == "keypress")? oevent.keyCode :();
KeyCode가 채택되지 않은 이유는 출력 문자가 아닌 키보드 키를 나타 내기 때문입니다. 따라서 출력 "a"및 "a", 키 코드는 동일하며 charcode는 문자로 구별됩니다.
또한 Keypress에서 표준 DOM의 키 코드 값은 항상 0입니다.
예 : 키보드 이벤트의 관련 속성 :
코드 사본은 다음과 같습니다.
<script language = "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 + "<br>"; // 출력 테스트
}
Window.onload = function () {
var otextArea = document.getElementById ( "TextIn");
otextArea.onkeydown = 핸들; // 모든 키보드 이벤트를 듣습니다
otextArea.onkeypress = 핸들;
}
</스크립트>
<div>
<textArea rows = "4"cols = "50"id = "textin">
</textarea>
<p id = "display"> </p>
</div>
3.htm 이벤트
브라우저의 경우 다양한 HTML 이벤트가 자체 이벤트가 있으며 일부 이벤트는로드, 오류, 선택 등과 같은 사용자가 종종 노출됩니다. 일반적으로 사용되는 HTML 이벤트는 다음과 같습니다.
로드 이벤트는 페이지로드가 완료되기 전에 DOM 프레임 워크가 구축되지 않았으므로 관련 작업이 발생할 수 없기 때문에 일반적으로 사용되는 이벤트 중 하나입니다.
윈도우 객체에로드 할당을 할당하면 언로드 이벤트는 <body>로 표시된 Onload 및 OnOnload 메소드와 동일합니다.