[WEB API] Event target

Event Target

이벤트를 받을 수 있으며, 이벤트에 대한 수신기(listener)를 가질 수 있는 객체가 구현하는 DOM 인터페이스

생성자

EventTarget()

 새로운 event객체 인스턴스를 만듦

var myEventTarget = new EventTarget();

parameter 없음

메소드

addEventListener()

  지정한 이벤트가 대상에 전달될 때마다 호출할 함수를 설정

target.addEventListener(type, listener[, options]);

type : 반응할 이벤트 유형을 나타내는 대소문자 구분 문자열
listener : 지정된 타입의 이벤트가 발생했을 때, 알림을 받는 객체

ex) window.addEventListener('resize',changeLayout())
	// 윈도우 크기 변경을 감지해 changeLayout 함수를 실행

removeEventListener()

 이전에 EventTarget.addEventListener()로 EventTarget에 등록했던 이벤트 리스너를 제거

target.removeEventListener(type, listener[, options]);

type : 제거할 이벤트 리스너의 이벤트 타입을 지정
listener : 이벤트 타깃에서 제거할 이벤트 핸들러 함수, EventListener를 지정

dispatchEvent()

 영향을 받는 Listener를 적절한 순서로 호출하는 지정된 Target에서 Event를 (동기적으로) 디스패치

cancelled = !target.dispatchEvent(event)

event : 디스패치될 Event 객체
target : Event.target 를 초기화하기 위해서 사용되고 어떤 이벤트 리스너를 호출할 것인지 결정

---

DOM Event

전달될 수 있는 이벤트 목록

이벤트 종류

resource event

cached		// 매니페스트에 나열된 리소스가 다운로드 되었고, 애플리케이션이 캐시될 때
error		// 리소스 로드가 실패했을 때
abort		// 리소스 로딩이 중단되었을 때
load		// 리소스와 그 의존 리스소의 로딩이 끝났을 때
beforeunload	// 윈도우, 다큐멘트 및 그 리소스가 언로드되려고 할 때
unload		// 다큐먼트 또는 의존 리소스가 언로드 되었을 때

network event

online		// 브라우저가 네트워크 접근을 얻었을 때
offline		// 브라우저가 네트워크 접근을 잃었을 때

focus event

focus		// 엘리먼트가 포커스를 받았을 때
blur		// 엘리먼트가 포커스를 잃었을 때

web socket event

open		// 웹소켓 연결이 수립되었을 때 
message		// 웹소켓을 통해 메시지를 받았을 때
error		// 웹소켓 연결이 어떤 문제로 닫혔을 때
close		// 웹소켓 연결이 닫혔을 때

session's history event

pagehide		// 세션 기록 항목이 사라지고 있을 때
pageshow	// 세션 기록 항목이 들어오고 있을 때
popstate		// 세션 기록 항목이 이동하고 있을 때

css animation event

animationstart	// css animation이 시작되었을 때
animationend	// css animation이 완료되었을 때
animationiteration	// css animation이 반복되었을 때

css transition event

transitionstart	// css 전이가 실제로 시작되었을 때(딜레이 후에 실행되었을 때)
transitioncancel	// css 전이가 취소되었을 때
transitionend	// css 전이가 완료되었을 때
transitionrun	// css 전이가 실행을 시작했을 때(딜레이 시작 전에 실행되었을 때)

form event

reset		// 리셋 버튼이 눌렸을 때
submit		// 제출 버튼이 눌렸을 때

printing event

beforeprint	// 프린트 대화상자가 열렸을 때
afterprint		// 프린트 대화상자가 닫혔을 때

text write event

compositionstart	// 텍스트 입력 통로가 준비되었을 때
compositionupdate// 작성될 텍스트 통로에 문자가 추가되었을 때
compositionend	// 텍스트 입력 통로가 완료되었거나 취소되었을 때

view event

fullscreenchange	// 엘리먼트가 전체화면 모드로 변경되었거나 일반 모드로 돌아왔을 때
fullscreenerror	// 기술적인 이유나 권한 거절을 이유로 전체화면 모드 전환이 불가능했을 때
resize		// 다큐먼트 뷰가 리사이즈 되었을 때
scroll		// 다큐먼트 뷰나 엘리먼트가 스크롤 되었을 때

clipboard event

cut		// 선택이 잘라내어진 후, 클립보드로 복사되었을 때
copy		// 선택이 클립보드로 복사되었을 때
paste		// 클립보드의 항복이 붙여넣어졌을 때

keyboard event

keydown		// 키가 눌렸을 때
keypress		// 쉬프트, fn, capsLock 을 제외한 키가 눌린 상태일 때(연속적으로 실행됨)
keyup		// 키 누름이 해제될 때

mouse event

mouseenter	// 포인팅 장치가 리스너가 등록된 엘리먼트 위로 이동했을 때
mouseover	// 포인팅 장치가 리스너가 등록된 엘리먼트나 그 자식 엘리먼트의 위로 이동했을 때
mousemove	// 포인팅 장치가 엘리먼트 위에서 이동했을 때(마우스 이동하는 동안 계속 실행됨)
mousedown	// 포인팅 장치 버튼이 엘리먼트 위에서 눌렀을 때
mouseup		// 포인팅 장치 버튼이 엘리먼트 위에서 놓였을 때
auxclick		// 포인팅 장치 버튼(주가 아닌 버튼)이 엘리먼트에서 눌렸다가 놓였을 때
click		// 포인팅 장치 버튼(주 버튼만 해당)이 엘리먼트에서 눌렸다가 놓였을 때
dbclick		// 포인팅 장치 버튼이 엘리먼트에서 두 번 클릭되었을 때
contextmenu	// 마우스 오른쪽 버튼이 클릭되었을 때
wheel		// 포인팅 장치의 휠 버튼이 어떤 방향이든 회전되었을 때
mouseleave	// 포인팅 장치가 리스너가 등록된 엘리먼트 밖으로 이동했을 때
mouseout	// 포인팅 장치가 리스너가 등록된 엘리먼트 또는 그자식 엘리먼트의 밖으로 이동했을 때
select		// 어떤 텍스트가 선택되고 있을 때
pointerlockchange	// 포인터가 잠겼거나 해제되었을 때
pointerlockerror	// 기술적인 이유나 권한 거절을 이유로 포인터 잠금이 불가했을 때

drag and drop event

dragstart		// 사용자가 엘리먼트나 텍스트 선택을 드래그하기 시작했을 때
drag		// 엘리먼트나 텍스트 선택이 드래그되고 있을 때
dragend		// 드래그 작업이 끝났을 때
dragenter	// 드래그된 엘리먼트나 텍스트 선택이 유효한 드랍 대상에 들어왔을 때
dragover		// 엘리먼트나 텍스트 선택이 유효한 드랍 대상 위로 드래그 되었을 때
dragleave	// 드래그 된 엘리먼트나 텍스트 선택이 유효한 드랍 대상에서 나갈 때
drop		// 엘리먼트가 유효한 드랍 대상에 드랍되었을 때