---

📝 2022. 11. 10

JavaScript / 이벤트 핸들러

---

📌 Today I Learned

• 이벤트 핸들러 (EventHandler)

💬 이벤트(Event)란?

이벤트는 웹 브라우저에서 DOM 요소와 사용자가 상호작용하는 것을 의미한다.
사용자가 버튼을 클릭하거나 입력창에 정보를 입력하거나 하는 행위들은 모두 이벤트로 볼 수 있다.
즉, 이벤트가 발생했다는 것은 웹 페이지에서 특정 동작이 발생하여, 웹 브라우저가 그 사실을 알려주는 것을 의미한다.

💬 이벤트 핸들러(EventHandler) 란?

특정 요소에서 발생하는 이벤트를 처리하기 위해 사용하는 함수
이벤트 핸들러가 연결된 특정 요소에서 지정된 타입의 이벤트가 발생하면, 웹 브라우저는 연결된 이벤트 핸들러를 실행한다.

💬 이벤트 핸들러 등록 방법

📂 HTML 요소의 속성으로 등록하는 방법

이벤트 처리 함수 종류

함수명	설명
onclick	마우스 클릭 시
ondbclick	마우스 더블클릭 시
onmousedown	마우스 버튼 누를 시
onmouseup	마우스 버튼에서 손 뗄 시
onmouseout	마우스 포인터가 요소를 벗어날 시
onmousemove	마우스 포인터가 요소 위에서 움직일 시
onmouseover	마우스 포인터가 요소 위에 올라왔을 시
onkeydown	키보드 누를 시
onkeypress	키보드를 누르고 손가락을 뗄 시
onkeyup	키보드 키에서 손가락을 뗄 시
onchange input	요소 값이 바뀔 시(변경된 이후, 포커스를 잃을 때)
oninput input	요소 값이 바뀔 시(바뀐 직후)
onblur input	요소에서 focus를 잃을 시
onfocus input	요소에서 focus가 주어질 시 (커서가 들어올 때)
onsubmit	폼 제출 버튼을 누를 시
onload	해당 페이지가 처음 읽힐 시(브라우저에서 문서를 읽을 때)
onunload	해당 페이지를 나갈 시(브라우저에서 문서를 닫을 때)
onabort	페이지나 이미지 읽어오기가 중단됐을 시
onerror	페이지나 이미지를 읽어오는 중 오류가 발생할 시