코드잇 강의
이벤트 핸들러 관련 내용을 늘 흐릿하게 알고 있었는데 이번에 확실히 이해하게 된 거 같다.
특히 blur는 뭐지, 하며 흐린 눈 하고 있었는데 포커스가 없어진 뒤를 의미하는 걸 알게 되었다.
대부분 아는 내용이지만 다시 정리한다.
마우스 이벤트
이벤트 타입 | 설명 |
---|---|
mousedown | 마우스 버튼을 누르는 순간 |
mouseup | 마우스 버튼을 눌렀다 떼는 순간 |
click | 왼쪽 버튼을 클릭한 순간 |
dblclick | 왼쪽 버튼을 빠르게 두 번 클릭한 순간 |
contextmenu | 오른쪽 버튼을 클릭한 순간 |
mousemove | 마우스를 움직이는 순간 |
mouseover | 마우스 포인터가 요소 위로 올라온 순간 |
mouseout | 마우스 포인터가 요소에서 벗어나는 순간 |
mouseenter | 마우스 포인터가 요소 위로 올라온 순간 (버블링이 일어나지 않음) |
mouseleave | 마우스 포인터가 요소에서 벗어나는 순간 (버블링이 일어나지 않음) |
키보드 이벤트
이벤트 타입 | 설명 |
---|---|
keydown | 키보드의 버튼을 누르는 순간 |
keypress | 키보드의 버튼을 누르는 순간 ('a', '5' 등 출력이 가능한 키에서만 동작하며, Shift, Esc 등의 키에는 반응하지 않음) |
keyup | 키보드의 버튼을 눌렀다 떼는 순간 |
포커스 이벤트
이벤트 타입 | 설명 |
---|---|
focusin | 요소에 포커스가 되는 순간 |
focusout | 요소로부터 포커스가 빠져나가는 순간 |
focus | 요소에 포커스가 되는 순간 (버블링이 일어나지 않음) |
blur | 요소로부터 포커스가 빠져나가는 순간 (버블링이 일어나지 않음) |
입력 이벤트
이벤트 타입 | 설명 |
---|---|
change | 입력된 값이 바뀌는 순간 |
input | 값이 입력되는 순간 |
select | 입력 양식의 하나가 선택되는 순간 |
submit | 폼을 전송하는 순간 |
스크롤 이벤트
이벤트 타입 | 설명 |
---|---|
scroll | 스크롤 바가 움직일 때 |
윈도우 창 이벤트
이벤트 타입 | 설명 |
---|---|
resize | 윈도우 사이즈를 움직일 때 발생 |
짧은 감상
어제 주니어 개발자를 위한 조언을 주제로 한 헤이조이스 강연을 들었는데 결론은 나를 좀 더 알아봐야 한다는 걸 깨달았다. 자아 탐색을 위한 서적과 노트만 산처럼 쌓아놓은 걸 반성... 이번 주에는 조금이라도 해봐야겠다.