이벤트 개체 : (이벤트 객체는 창 객체의 속성입니다. 이벤트가 발생하면 이벤트 객체가 동시에 생성됩니다. 이벤트가 끝나고 이벤트 객체가 사라집니다)
IE : Window.event; // 객체를 얻습니다
Dom : Argument [0]; // 객체를 얻습니다
IE의 이벤트 객체에 대한 일반적인 속성 방법 :
1. ClientX : 이벤트가 발생하면 클라이언트 영역에서 마우스 포인터의 X 좌표 (도구 모음, 스크롤 바 등);
2. Clicienty : 이벤트가 발생하면 클라이언트 영역에서 마우스 포인터의 Y 좌표 (도구 모음, 스크롤 바 등);
3. KeyCode : 키 코드 이벤트의 경우 키가 눌린 키의 유니 코드 문자를 나타내며 키 다운/키 업 이벤트의 경우 누르면 키보드가 숫자 표시기임을 나타냅니다 (키의 값을 가져옵니다).
4. offsetx : 이벤트를 일으킨 물체에 대한 마우스 포인터의 x 좌표;
5. 오프 세트 : 이벤트를 일으킨 물체에 대한 마우스 포인터의 y 좌표;
6.srcelement : 이벤트가 발생하는 요소;
DOM의 이벤트 객체에 대한 일반적인 속성 메소드 :
1.clientx;
2. 클라이언트;
3. PAGEX; 페이지에 대한 마우스 포인터의 X 좌표;
4. Pagey; 페이지에 대한 마우스 포인터의 Y 좌표;
5. 분류법 :이 방법을 호출하는 것은 사건의 추가 전파를 막을 수 있습니다 (버블 링).
6. 표적 : 트리거 된 이벤트 요소/객체;
7. 유형 : 이벤트의 이름;
두 이벤트 객체의 유사점과 차이점 :
유사성 :
1. 이벤트 유형을 얻으십시오.
2. 키보드 코드를 가져옵니다 (Keydown/keyup 이벤트);
3. 시프트 감지, alt, ctrl;
4. 클라이언트 영역의 좌표를 얻으십시오.
5. 스크린 좌표를 얻으십시오.
차이점 :
1. 대상을 얻으십시오.
// 즉 : var otarget = oevent.srcelement;
// dom : var otarget = oevent.target;
2. 문자 코드를 얻으십시오.
// 즉 : var icarcode = oevent.keycode;
// dom : var icarcode = oevent.charcode;
3. 차단 이벤트의 기본 동작;
// IE : Oevent.returnValue = false;
// dom : oevent.preventDefault;
4. 버블 링 중지 :
//ie:oevent.cancelBubble=true;
//dom:oevent.stopPropagation
이벤트 유형 :
1. 마우스 이벤트 :
OnMouseOver : 마우스가 움직일 때;
onmouseout : 마우스가 옮겨 질 때;
Onmousedown : 마우스를 누르면;
Onmouseup : 마우스가 올라갈 때;
Onclick : 마우스 왼쪽 버튼을 클릭 할 때;
ondblClick : 왼쪽 마우스 버튼을 두 번 클릭하면;
2. 키보드 이벤트 :
OnkeyDown : 사용자가 키보드에서 키를 누르면 발생합니다.
ONKEYUP : 사용자가 프레스 키를 공개 할 때 발생합니다.
Keypress : 사용자가 키를 계속 누르면;
3.html 이벤트 :
onload : 페이지를로드 할 때;
onunload : 페이지를 제거 할 때;
중단 : 로딩 프로세스가 종료되기 전에 사용자가 완전히 재현되지 않은 경우, 완전히 재현되지 않은 경우 Abort 이벤트가 발생합니다.
오류 : JavaScript에서 오류가 발생할 때 생성 된 이벤트;
선택 : 사용자가 입력 또는 Textarea에서 문자를 선택할 때 트리거 된 선택 이벤트
변경 : 입력 또는 텍스트 주로에서 초점을 잃으면 변경 이벤트가 Select에서 트리거됩니다.
제출 : 양식이 제출되면 제출 이벤트가 트리거됩니다.
재설정 : 재설정
크기 조정 : 창이나 프레임이 크기가 커질 때 트리거되는 이벤트;
스크롤 : 사용자가 스크롤하거나 스크롤 막대가있을 때 이벤트가 발생했습니다.
초점 : 초점이 손실 될 때;
블러 : 집중할 때;
자바 스크립트 이벤트 모델
1. JavaScript 이벤트 모델 : 1. 버블 유형 : <입력 유형 = "버튼"> 사용자가 버튼을 클릭하면 : 입력-바디 -HTML-Document-Window (하단에서 위로 버블) IE 브라우저는 버블을 사용합니다.
2. 캡처 유형 : <input type = "button"> 사용자가 버튼을 클릭 할 때 : Window-Document-HTML-Body Input (위에서 아래로)
ECMA 표준화 후 다른 브라우저는 두 가지 유형을 지원하고 캡처가 먼저 발생합니다.
2. 전통적인 이벤트를 작성하는 세 가지 방법 :
1. <input type = "button"onclick = "Alert ( 'helloWorld!')">
2. <input type = "button on click = name1 ()"> ====== <clation> function name1 () {alert ( 'helloword!');} </script> // name function
3. <입력 유형 = "버튼"id = "input1"> // 익명 함수
코드 사본은 다음과 같습니다.
<cript>
var button1 = document.getElementById ( "input1");
button1.onclick = funtion () {
경고 ( 'Helloword!')
}
</스크립트>
3. 현대 이벤트 쓰기 방법 :
코드 사본은 다음과 같습니다.
<input type = "button"id = "input1"> // IE에서 이벤트 추가
<cript>
var fnclick () {
Alert ( "나는 클릭했다")
}
var oinput = document.getElementById ( "input1");
OINPUT.ATTACHEVENT ( "onclick", fnclick);
--------------------------------------------
OINPUT.DETACHEVENT ( "onclick", fnclick); // IE에서 이벤트 삭제
</스크립트>
코드 사본은 다음과 같습니다.
<input type = "button"id = "input1"> // dom에서 이벤트를 추가합니다
<cript>
var fnclick () {
Alert ( "나는 클릭했다")
}
var oinput = document.getElementById ( "input1");
OINPUT.ADDEVENTLISTERNE ( "ONCLICK", fnclick, true);
--------------------------------------------
OINPUT.removeEventListener ( "onclick", fnclick); // dom에서 이벤트 삭제
</스크립트>
코드 사본은 다음과 같습니다.
<입력 유형 = "버튼"id = "input1"> // IE 및 DOM 추가 이벤트와 호환됩니다.
<cript>
var fnclick1 = function () {alert ( "i clicked")}
var fnclick2 = function () {alert ( "i clicked")}
var oinput = document.getElementById ( "input1");
if (document.attachevent) {
OINPUT.ATTACHEVENT ( "OnClick", fnclick1)
OINPUT.ATTACHEVENT ( "onclick", fnclick2)
}
else (document.addeventListener) {
oinput.addeventListener ( "클릭", fnclick1, true)
oinput.addeventListener ( "클릭", fnclick2, true)
}
</스크립트>