[JavaScript] 이벤트 리스너 | addEventListener 메서드 📝

🔔 addEventListener 메서드

이벤트가 발생했을 때 처리를 할 함수를 가리킴

같은 요소의 이벤트의 같은 이벤트에 이벤트 리스너를 여러 개 등록할 수 있음!

 

💻 addEventListener 메서드

DOM객체.addEventListener("이벤트명", 이벤트가 발생했을 때 실행할 함수, 이벤트 단계);

[이벤트명]

click	마우스로 클릭했을 때
dblclick	마우스로 더블클릭했을 때
mousedown	마우스 버튼을 눌렀을 때
mouseup	마우스 버튼에서 손가락을 떼었을 때
mouseover	마우스 포인터가 HTML 요소에 놓여 있을 때
mouseout	마우스 포인터가 HTML 요소를 벗어났을 때
mousemove	마우스 포인터가 HTML 요소 위에서 움직일 때
keydown	키보드의 키를 눌렀을 때
keypress	키보드의 키를 누르고 손가락을 떼었을 때
keyup	키보드의 키에서 손가락을 떼었을 때
change	input 요소의 값이 바뀌었을 때
focus	input 요소의 포커스를 맞추었을 때
blur	input 요소의 포커스를 잃었을 때
select	텍스트 필드 등의 텍스트를 선택했을 때
submit	폼 제출 버튼을 눌렀을 때
load	HTML을 모두 읽어 들였을 때
unload	웹 페이지가 메모리에서 내려갈 때 (다른 페이지로 전환하거나 브라우저 창을 닫을 때 등)
resize	HTML 요소의 크기가 바뀌었을 때 / 브라우저 창의 크기를 조절할 때
scroll	웹 페이지를 스크롤할 때 (웹 페이지에 스크롤 바가 없다면 이벤트는 발생하지 않음)

 

 

 

 

본 내용은 "모던 자바스크립트 입문" 참고하여 정리함