웹개발기초 11주차

load 이벤트 - 1. HTML 문서 전체 로딩완료 2. 이미지의 로딩 완료시

click 이벤트 - 마우스 클릭

submit 이벤트 - submit 버튼 클릭

reset 이벤트 - reset 버튼 클릭

focus 이벤트 - 입력하기 위해 선택

keypress 이벤트 - 키를 누를 때

keyup 이벤트 - 누른 키를 놓을 때

resize 이벤트 - 윈도우 크기 변경 시

change 이벤트 - 라디오 버튼 선택 시

dbclick 이벤트 - 마우스 더블클릭 시

 

addEventListener(eventName, listener,[useCapture])

 

이벤트 객체

- 발생한 이벤트에 관련된 다양한 정보를 담은 객체

-> 이벤트 처리 후 이벤트 객체 소멸

 

이벤트 객체는 이벤트 리스너 함수의 첫 번째 매개변수로 전달

1. 이름을 가진 이벤트 리스너

function f(e){....} //매개변수 e에 이벤트 객체 전달받음

obj.onclick = f; // obj 객체의 onclick 리스너로 함수 f 등록

2. 익명 함수인 경우

obj.onclick = function(e){...} //매개변수 e에 이벤트 객체 전달받음

3. HTML 태그에 이벤트 리스너

function f(e) {...}

<button onclick="f(event)">버튼</button>

<div onclick="alert(event.type)">버튼</div>

 

이벤트 객체에 들어있는 정보

- 현재 발생한 이벤트에 관한 다양한 정보 -> 객체의 프로퍼티와 메소드로 알 수 있다.

- 이벤트 객체의 공통 멤버

1. type - 현재 발생한 이벤트 종류

2. target - 이벤트를 발생시킨 객체

3. currentTarget - 현재 이벤트 리스너를 실행하고 있는 DOM객체

4. defaultPrevented - 이벤트의 디폴트 행동이 취소되었는지 나타내는 true/false 값

5. preventDefault() - 이벤트의 디폴트 행동을 취소시키는 메소드

 

이벤트의 디폴트 행동

- 특정 이벤트에 대한 HTML 태그의 기본 행동

ex) <a>의 click 이벤트 디폴트 행동 -> 웹 페이지 이동

이를 막는 방법

1. 이벤트 리스너에서 false 리턴

-> <a href="http://www.naver.com" onclick="return false">이동 안 되는 링크</a>

2. 이벤트 객체의 preventDefault() 메소드 호출

-> <a href="http://www.naver.com" onclick="event.preventDefault();">이동 안되는 링크</a>

 

이벤트 흐름

- 캡쳐 단계

- 버블 단계

- 이벤트 흐름 중단 : stop.Propagation() 호출

 

마우스 이벤트 객체의 프로퍼티

x,y - (x,y)는 타겟 객체의 부모 객체 내에서의 마우스 좌표

screenX, screenY - (screenX,screenY)는 스크린 기준으로 한 마우스 좌표

clientX, clientY - (clientX,clientY)는 브라우저 윈도우의 문서출력 영역 내에서 마우스 좌표

offsetX, offsetY - (offsetX,offsetY)는 타겟 객체 내에서 마우스 좌표

button - 눌린 마우스 버튼

0 - 버튼 안누름

1 - 왼쪽 버튼

2 - 오른쪽 버튼

3 - 왼쪽, 오른쪽 버튼 둘 다

4 - 중간 버튼

wheelDelta - 마우스 휠이 구른 방향

양수 - 위쪽으로 굴림 (120)

음수 - 아래쪽으로 굴림 (-120)

onclick - 마우스 클릭

ondblclick - 마우스 더블 클릭

onmousedown - HTML 태그에 마우스 버튼을 누르는 순간

onmouseup - 눌러진 버튼이 놓여지는 순간

onmouseover - HTML 태그 위로 올라오는 순간 (자식 포함)

onmouseout - HTML 태그 영역 벗어나는 순간 (자식 포함)

onmouseenter - HTML 태그 위로 올라오는 순간 (버블 단계 X)

onmouseleave - HTML 태그 영역 벗어나는 순간 (버블 단계 X)

onwheel - HTML 태그에 마우스 휠이 구르는 동안 호출

oncontextmenu - HTML 태그 위 마우스 오른쪽 버튼 클릭

 

onload 리스너

- window 객체에 발생(body로 onload하는 것과 동일)

- 이미지 로딩 완료

 

onfocus - 포커스를 받을 때 발생

onblur - 포커스를 잃을 때 발생

 

selectedIndex => index는 선택 상태의 옵션 인덱스 0,1,....

selectedIndex =2; // 3번째 옵션 선택

options[2].selected = true; // 3번째 옵션 선택

 

키 이벤트

onkeydown - 키가 눌리는 순간 호출, 모든 키에 대해 작동

onkeyup - 눌러진 키가 떼어지면 호출

onkeypress - 문자 키와 <Enter>, <Space>, <Esc> 키에 대해서만 눌러지는 순간 추가 호출 (문자 키 아니면 호출 X)

 

onreset - reset 버튼 클릭시 (<input type="reset"> 클릭 시) - false 리턴하면 폼 초기화 X

onsubmit - submit 버튼 클릭시 (<input type="submit"> 클릭 시 ) - false 리턴하면 폼 전송 X

리스너 작성 - onrest과 onbsubmit리스너는 form태그에 달아야 한다.