addEventListenser 총정리

자바스크립트는 동적인 언어이기때문에 이를 잘 활용하기 위해서는 내 기준 event 메소드를 쓰는 것이 중요한 것 같다.

다른 문법들을 같이 섞어 써야하지만 addEventListenser 메소드로 사용자의 행동을 이끌어줄 수 있기 때문이라고 생각한다.

그래서 오늘은 자바스크립트의 addEventListenser를 샅샅히 살펴보려고 한다.

---

먼저 addEventListenser의 구조는 아래와 같다.

DOM의 타겟.addEventListenser(event타입, 실행될 함수, 옵션)

하지만 우리는 리액트를 사용하고 있고 그런 경우 더 쉽게 이벤트를 적용할 수 있다.

중괄호 안에는 콜백함수도 들어갈 수 있고 함수를 따로 넣어줄 수도 있는데

함수명만 넣어주는 경우 별도의 따옴표 없이 함수명만 넣어주면 된다.

<div 이벤트타입={실행할 함수명}></div>

addEventListenser를 삭제하고 싶을 땐 아래와 같이 사용하면 된다.

removeEventListenser(이벤트타입, 실행한 함수명)

event 종류는 아래와 같다.

UI 이벤트 : 사용자가 브라우저와 상호작용할 때
load	웹 페이지의 로드가 완료되었을 때
unload	웹 페이지가 언로드 될 때(새로운 페이지를 요청한 경우 )
error	브라우저가 자바스크립트 오류를 만났거나 요청한 자원이 없는 경우
resize	브라우저의 창 크기를 조정했을 때
scroll	사용자가 페이지를 위아래로 스크롤 할 때
키보드 이벤트 : 사용자가 키보드와 상호작용할 때
keydown	사용자가 키를 눌렀을 때
keyup	사용자가 키를 누르고 뗐을 때
keypress	사용자가 누른 키의 문자가 입력되었을 때
마우스 이벤트 : 사용자가 마우스와 상호작용할 때
click	사용자가 동일한 요소 위에서 마우스 버튼 눌렀다 뗄 때
dbclick	두번 눌렀다 뗄 때
mousedown	마우스 누르고 있을 때
mouseup	눌렀던 마우스 버튼 뗄 때
mousemove	마우스 움직였을 때
mouseover	요소 위로 마우스 움직였을 때
mouseout	요소 바깥으로 마우스 움직였을 때
포커스 이벤트 : 사용자가 요소에 포커스를 잡거나 잃었을 때
focus	요소가 포커스 얻었을 때
blur	요소가 포커스 잃었을 때
form 이벤트 : 사용자가 form 태그와 관련된 요소와 상호작용할 때
input	input 또는 textarea 요소의 값이 변경되었을 때
change	선택상자, 체크박스, 라디오버튼의 상태가 변경되었을 때
submit	사용자가 버튼 눌러 form 태그가 반응 했을 때
reset	reset 버튼 클릭할 때
cut	form 태그 내의 콘텐츠를 잘라내기 했을 때
copy	form 태그 내의 콘텐츠를 복사 했을 때
paste	form 태그 내의 콘텐츠를 붙여넣기 했을 때
select	텍스트 선택했을 때