자바스크립트 기초(2) 이벤트_기본지식

이벤트 객체: (이벤트 객체는 윈도우 객체의 속성입니다. 이벤트가 발생하면 동시에 이벤트 객체가 생성됩니다. 이벤트가 끝나면 이벤트 객체가 사라집니다.)

IE: window.event;//객체 가져오기

DOM: 인수[0];//객체 가져오기

IE에서 Event 객체의 일반적으로 사용되는 속성 메서드:

1.clientX: 이벤트가 발생하면 클라이언트 영역(툴바, 스크롤 막대 등 제외)에 있는 마우스 포인터의 X 좌표

2.clientY: 이벤트가 발생하면 클라이언트 영역(툴바, 스크롤 막대 등 제외)에 있는 마우스 포인터의 Y 좌표

3.keyCode: keyCode 이벤트의 경우 누른 키의 유니코드 문자를 나타냅니다. keydown/keyup 이벤트의 경우 누른 키보드가 숫자 표시기임을 나타냅니다(키 값 가져오기).

4.offsetX: 이벤트를 트리거한 개체를 기준으로 한 마우스 포인터의 X 좌표

5.offsetY: 이벤트를 트리거한 개체를 기준으로 한 마우스 포인터의 Y 좌표

6.srcElement: 이벤트를 발생시킨 요소입니다.

DOM에서 이벤트 객체의 일반적으로 사용되는 속성 메서드:

1.clientX;

2.clientY;

3.pageX; 페이지를 기준으로 한 마우스 포인터의 X 좌표;

4.pageY; 페이지를 기준으로 한 마우스 포인터의 Y 좌표

5.StopPropagation: 이 메소드를 호출하면 이벤트의 추가 전파(버블)를 방지할 수 있습니다.

6.대상: 트리거된 이벤트 요소/객체

7.유형: 이벤트 이름

두 이벤트 객체의 유사점과 차이점

: 같은 점:

1. 이벤트 유형을 가져옵니다.

2. 키보드 코드 가져오기(keydown/keyup 이벤트)

3. Shift, Alt, Ctrl 감지

4. 클라이언트 영역 좌표를 가져옵니다.

5. 화면 좌표 가져오기

차이점:

1. 목표를 달성하세요

//IE: var oTarget=oEvent.srcElement;

//DOM: var oTarget=oEvent.target;

2. 문자 코드 받기

//IE: var iCharCode=oEvent.keyCode;

//DOM: var iCharCode=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 오류가 발생할 때 생성되는 이벤트

select: 입력 또는 텍스트 영역에서 사용자가 문자를 선택하면 선택 이벤트가 트리거됩니다.

변경: 입력 또는 텍스트 영역에서 포커스를 잃으면 선택

에서 변경 이벤트가 트리거됩니다.

제출: 양식이 제출되면 제출 이벤트가 트리거됩니다.

재설정:재설정

크기 조정: 창이나 프레임 크기가 조정될 때 트리거되는 이벤트

스크롤: 사용자가 스크롤하거나 스크롤 막대가 있을 때 트리거되는 이벤트

초점: 초점을 잃었을 때

흐림: 초점을 맞출 때

자바스크립트 이벤트 모델

1.Javascript 이벤트 모델: 1. 버블링 유형: 사용자가 버튼을 클릭할 때: input-body-html-document-window (아래에서 위로 버블이 발생함) IE 브라우징 장치는 버블링을 사용합니다

2. 캡처 유형: 사용자가 버튼을 클릭할 때: window-document-html-body-input (위에서 아래로)

ECMA 표준화 후 다른 브라우저는 두 유형을 모두 지원하며 캡처가 먼저 발생합니다.

2. 전통 행사를 쓰는 세 가지 방법:

1.

2.======<script>함수 이름1(){alert('helloword!');}</script> /유명한 기능

3. //익명함수

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

Var 버튼1=document.getElementById("input1");
버튼1.onclick=funtion(){
경고('안녕하세요!')
}

3. 현대적인 이벤트 작성 방법:

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

//IE에 이벤트 추가

var fnclick(){
warning("클릭당했습니다.")
}
var Oinput=document.getElementById("input1");
Oinput.attachEvent("onclick",fnclick);
---------------------
Oinput.detachEvent("onclick",fnclick);//IE에서 이벤트 삭제

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

//DOM에 이벤트 추가

var fnclick(){
warning("클릭당했습니다.")
}
var Oinput=document.getElementById("input1");
Oinput.addEventListener("onclick",fnclick,true);
---------------------
Oinput.removeEventListener("onclick",fnclick);//DOM에서 이벤트 삭제

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

//IE 및 DOM 추가 이벤트와 호환됩니다

var fnclick1=function(){alert("클릭당했습니다")}
var fnclick2=function(){alert("클릭당했습니다")}
var Oinput=document.getElementById("input1");
if(document.attachEvent){
Oinput.attachEvent("onclick",fnclick1)
Oinput.attachEvent("onclick",fnclick2)
}
else(document.addEventListener){
Oinput.addEventListener("click",fnclick1,true)
Oinput.addEventListener("click",fnclick2,true)
}