자바스크립트- addEventListener 이벤트 종류, 이벤트 등록, JS이벤트 종류

자바스크립트를 이용해서 이벤트를 등록하는 방법?

특정 이벤트가 발생되었을 떄, 특정 함수를 실행할 수 있게 해주는 것이 addEventListener 입니다.

웹에서 이벤트 처리 방법

1. HTML 요소의 속성으로 등록
   <...onchange=""...>, <...onclick=""...> 등등
2. DOM 요소의 프로퍼티로 등록
   let btn = document.getElementById('Button');
   btn.onclick=btnClick(); ...
   
3. addEventListener 사용하여 등록

[이벤트넣을 대상].addEventListener(" [이벤트 종류] ");

const conponent = document.getElementById("conponent");

conponent.addEventListener("이벤트종류", 함수이름);

//반대
conponent.removeEventListener("이벤트종류", 함수이름);

컨포넌트라는 객체가 있습니다.

이 객체가 클릭 이 되었을때 발생하는 이벤트를 넣고싶으시다면

conponent.addEventListener("이벤트종류", 함수이름);
//위의 이벤트종류의 글자를 바꿔줍니다.
conponent.addEventListener("click", 함수이름);
//그리고 함수이름의 부분에 실행될 함수를 넣습니다.
conponent.addEventListener("click", conponentClick);

function conponentClick(){
	alert('객체가 클릭되었음!');
}

위에서 순서대로 보시겠습니다. 

우선은 이벤트종류를 클릭으로 , 

그리고 함수를 정의합니다.

이벤트는 우리가 주로 사용하는 클릭, 마우스오버, 아웃 등등 많습니다. 

하지만 더 많은 이벤트를 알고 싶고 종류를 알아가고 싶은 분들을 위해서 조금 더 정리했습니다.

가장 일반적인 카테고리

리소스 이벤트이벤트명발생하는 시점

cached	매니페스트에 나열된 리소스가 다운로드되었고, 애플리케이션이 캐시될 때.
error (en-US)	리소스 로드가 실패했을 때.
abort (en-US)	리소스 로딩이 중단되었을 때.
load	리소스와 그 의존 리소스의 로딩이 끝났을 때.
beforeunload (en-US)	window, document 및 그 리소스가 언로드되려고 할 때.
unload (en-US)	document 또는 의존 리소스가 언로드될 때.

---

네트워크 이벤트이벤트명발생하는 시점

online (en-US)	브라우저가 네트워크 접근을 얻었을 때.
offline (en-US)	브라우저가 네트워크 접근을 잃었을 때.

---

포커스 이벤트이벤트명발생하는 시점

focus (en-US)	엘리먼트가 포커스를 받았을 때(버블링하지 않음).
blur	엘리먼트가 포커스를 잃었을 때(버블링하지 않음).

---

웹소켓 이벤트이벤트명발생하는 시점

open	웹소켓 연결이 수립되었을 때.
message	웹소켓을 통해 메시지를 받았을 때.
error (en-US)	웹소켓 연결이 어떤 문제로 닫혔을 때(예로, 일부 데이터가 전송되지 못했을 때).
close	웹소켓 연결이 닫혔을 때.

---

세션 기록 이벤트이벤트명발생하는 시점

pagehide (en-US)	세션 기록 항목이 사라지고 있을 때.
pageshow (en-US)	세션 기록 항목이 들어오고 있을 때.
popstate	세션 기록 항목이 이동하고 있을 때(특정 경우에서).

---

CSS 애니메이션 이벤트이벤트명발생하는 시점

animationstart (en-US)	CSS 애니메이션이 시작되었을 때.
animationend (en-US)	CSS 애니메이션이 완료되었을 때.
animationiteration (en-US)	CSS 애니메이션이 반복되었을 때.

---

CSS 전이 이벤트이벤트명발생하는 시점

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

---

폼 이벤트Event NameFired When

reset (en-US)	리셋 버튼이 눌렸을 때
submit (en-US)	제출 버튼이 눌렸을 때

---

Printing Events이벤트명발생하는 시점

beforeprint (en-US)	프린트 대화상자가 열렸을 때
afterprint (en-US)	프린트 대화상자가 닫혔을 때

---

텍스트 작성 이벤트이벤트명발생하는 시점

compositionstart (en-US)	텍스트 입력 통로가 준비되었을 때(키보드 입력을 위한 키 다운과 유사하지만, 음성 인식과 같은 다른 입력과도 동작합니다).
compositionupdate (en-US)	작성될 텍스트 통로에 문자가 추가되었을 때.
compositionend (en-US)	텍스트 입력 통로가 완료되었거나 취소되었을 때.

---

뷰 이벤트이벤트명발생하는 시점

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

---

클립보드 이벤트이벤트명발생하는 시점

cut (en-US)	선택이 잘라내어진 후 클립보드로 복사되었을 때
copy (en-US)	선택이 클립보드로 복사되었을 때
paste (en-US)	클립보드의 항목이 붙여너어졌을 때

---

키보드 이벤트이벤트명발생하는 시점

keydown	키가 눌렸을 때
keypress (en-US)	쉬프트, Fn, CapsLock 을 제외한 키가 눌린 상태일 때(연속적으로 실행됨.).
keyup (en-US)	키 누름이 해제될 때

---

마우스 이벤트이벤트명발생하는 시점

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

---

드래그 앤 드랍 이벤트이벤트명발생하는 시점

dragstart (en-US)	사용자가 엘리먼트나 텍스트 선택을 드래그하기 시작할 때.
drag (en-US)	엘리먼트나 텍스트 선택이 드래그되고 있을 때(350ms 마다 연속적으로 실행됨).
dragend (en-US)	드래그 작업이 끝났을 때(마우스 버튼을 놓거나 escape 키를 눌러서).
dragenter (en-US)	드래그된 엘리먼트나 텍스트 선택이 유효한 드랍 대상에 들어왔을 때.
dragover (en-US)	엘리먼트나 텍스트 선택이 유효한 드랍 대상위로 드래그되었을 때(350ms 마다 연속적으로 실행됨.).
dragleave (en-US)	드래그된 엘리먼트나 텍스트 선택이 유효한 드랍 대상에서 나갈 때.
drop (en-US)	엘리먼트가 유효한 드랍 대상에 드랍되었을 때.

---

미디어 이벤트이벤트명발생하는 시점

durationchange (en-US)	duration 속성이 업데이트되었을 때.
loadedmetadata (en-US)	메타데이터가 로드되었을 때.
loadeddata (en-US)	미디어의 첫 번째 프레임이 로딩을 마쳤을 때.
canplay	브라우저가 미디어를 실행할 수 있지만, 컨텐츠의 버퍼링없이 중단되지 않고 미디어를 끝까지 재생하기엔 로딩된 데이터가 충분하지않다고 측정했을 때.
canplaythrough	브라우저가 컨텐츠 버퍼링 중단 없이 미디어를 끝까지 재생할 수 있다고 측정했을 때.
ended (en-US)	미디어의 끝에 도달해 재생이 멈추었을 때.
emptied (en-US)	미디어가 비었을 때. 예로, 이 이벤트는 미디어가 이미 로딩되었고(또는 부분적으로 로딩되었고), load() 메소드가 리로드를 위해 호출되었을때 전송됩니다.
stalled (en-US)	유저 애이전트가 미디어 데이터 페치를 시도했지만, 데이터가 예상치 못하게 전송되지 않을 때.
suspend (en-US)	미디어 데이터 로딩이 유예되었을 때.
play (en-US)	재생이 시작되었을 때.
playing (en-US)	일시정지나 데이터 부족으로 딜레이된 후로부터 재생할 준비가 되었을 때.
pause (en-US)	재생이 일시정지 되었을 때.
waiting (en-US)	일시적인 데이터 부족으로 재생이 중지되었을 때.
seeking (en-US)	찾기 작업이 시작되었을 때.
seeked (en-US)	찾기 작업이 완료되었을 때.
ratechange (en-US)	재생률이 변경되었을 때.
timeupdate (en-US)	currentTime 속성으로 나타나는 시간이 업데이트되었을 때.
volumechange (en-US)	볼륨이 변경되었을 때.
complete (en-US)	OfflineAudioContext 의 렌더링이 종료되었을 때.
audioprocess (en-US)	ScriptProcessorNode (en-US) 의 입력 버퍼의 처리가 준비되었을 때.

---

진행 이벤트이벤트명발생하는 시점

loadstart (en-US)	진행이 시작되었을 때.
progress (en-US)	진행중일 때.
error (en-US)	진행이 실패했을 때.
timeout	프리셋 타임 만료로 진행이 종료되었을 때.
abort	진행이 종료되었을 때(에러가 아닌 이유).
load	진행이 성공했을 때.
loadend (en-US)	진행이 멈추었을 때("error", "abort" 또는 "load" 가 디스패치된 후).

 

이상으로 제가 정리한것은 여기까지 입니다. 저는 주로

이벤트 명	설명
mouseover	해당 객체의 영역 위에 마우스 커서가 진입하는 순간
mouseout	해당 객체의 영역 위에 마우스 커서가 빠져나가는 순간
mousedown	해당 객체의 영역 위에서 마우스 버튼을 누르는 순간
mouseup	해당 객체의 영역 위에서 마우스 버튼을 떼는 순간
mousemove	해당 객체의 영역 위에서 마우스 커서가 움직이는 순간
keydown	키를 눌렀을 때 발생
keyup	키를 뗐을 때 발생
keypress	키를 눌렀을 때 발생 (잘 안 쓰임)
click	마우스 버튼을 클릭하고 버튼에서 손가락을 떼면 발생
resize	브라우저 창의 크기를 조절할때 발생한다.
scroll	스크롤바를 드래그하거나 키보드(up, down)를 사용하거나 마우스 휠을 사용해서 웹페이지를 스크롤 할 때 발생
change	변동이 있을 때 발생
focus	포커스를 얻었을 때 발생
load	로드가 완료 되었을 때 발생
select	option 태그 등에서 선택을 했을 때 발생
submit	submit 실행 시 발생

이 것들을 사용합니다. 

더 자세한 정보를 얻고싶으시다면 https://developer.mozilla.org/ko/docs/Web/Events#%EA%B0%80%EC%9E%A5_%EC%9D%BC%EB%B0%98%EC%A0%81%EC%9D%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC 를 확인해주시면 되겠습니다.

이벤트 참조 | MDN