Event란?
- 마우스를 이용해 버튼을 클릭할 때는 클릭
이벤트가 발생 이벤트가 발생했을 때 어떠한 액션을 위한 함수를 호출하는 데 그 함수가 바로이벤트 리스너
EventListener 등록
-
자바스크립트 코드에서 프로퍼티로 등록
-
HTML 태그에 속성으로 등록
-
addEventListener 메소드 사용
element.addEventListener(이벤트명, 실행할 함수명(listener), 옵션);
Event 객체
이벤트가 발생할 때 이벤트 객체를 가져올 수 있다
Event 종류
-
UI 이벤트
load 문서나 객체가 로드 완료 되었을 때 발생
change 객체의 내용이 변동되거나 focus를 잃었을 때 발생
resize 객체의 크기가 바뀌었을 때 발생
scroll 스크롤바를 조작할 때 발생
error 에러가 발생했을 때 발생 -
키보드 이벤트
keydown 키를 눌렀을 때 발생
keyup 키를 눌렀을 때 발생
keypress 사용자가 눌렀던 키의 문자가 입력되었을 때 발생 -
마우스 이벤트
click 객체를 클릭했을 때 발생
dbclick 객체를 더블 클릭했을 때 발생
mousedown 마우스를 클릭했을 때 발생
mouseout 마우스가 특정 객체 밖으로 나갔을 때 발생
mouseover 마우스가 특정 객체 위로 올려졌을 때 발생
mousemove 마우스가 움직였을 때 발생
mouseup 마우스에서 손을 뗏을 때 발생 -
포커스 이벤트
focus 객체에 focus가 되었을 때 발생
blur 객체가 focus를 잃었을 때 발생 -
폼 이벤트
input, textarea 요소 값이 변경되었을 때 발생
change 선택 상자, 체크 박스, 라디오 버튼의 상태가 변경되었을 때 발생
select 텍스트를 선택을 했을 때 발생
reset 리셋 버튼을 눌렀을 때 발생
submit 사용자가 버튼 키 등을 활용하여 폼을 전송할 때 발생
cut/copy/paste 사용자가 폼필드의 콘텐츠를 잘라내기/복사/붙여넣기 했을 때 발생
-
클릭 이벤트
-
mousedown vs click
먼저 mousedown 이벤트가 발생하고 마우스를 놓았을 때 click 이벤트 발생
-
form event
-
keyup vs key down keypress
-
keyup
- 키보드에서 손을 떼었을 때 실행
-
keydown
-
키보드를 눌렀을 때 실행
-
키보드를 계속 누르고 있을 때 실행
-
사용자가 눌렀던 키의 문자가 입력되었을 때 발생
-
-
keypress
-
키보드를 눌렀을 때 실행
-
키보드를 누르고 있을 때 한 번만 실행
-
사용자가 눌렀던 키의 문자가 입력되었을 시 발생
-
Event Bubbling
가장 깊게 중첩된 요소에 이벤트가 발생했을 때 이벤트가 위로 전달됨
p에 할당된 핸들러 -> div에 할당된 핸들러 -> form에 할당된 핸들러
- Bubbling 중단하기
event.stopPropagation()
p 요소를 클릭해도 event Bubbling이 발생하지 않기에 부모 요소들의 핸들러도 호출이 되지 않음
Event Capturing
제일 상단에 있는 요소에서 아래로 이벤트가 내려오는 것
- 이벤트의 흐름
- 캡쳐링 단계 - 이벤트가 하위 요소로 전파
- 타깃 단계 - 이벤트가 실제 타깃 요소로 전달
- 버블링 단계 - 이벤트가 상위 요소로 전파
Event Delegation
위 코드를 보면 버튼이 2개가 있고 버튼을 누르면 경고창이 나옵니다
자바스크립트로 버튼 하나를 생성하였습니다
하지만 새로 생성된 버튼을 누르면 경고창이 나오지 않는 데, 그 이유는 버튼이 생기기 전에 이미 각 버튼 요소에 핸들러가 더해졌기 때문입니다
- 해결책
현재 상황은 하위 요소인 버튼에서 이벤트를 제어하고 있어 새로운 요소가 추가될 때마다 이벤트리스너를 등록해주어야 합니다
하지만, 상위 요소에서 이벤트를 제어하면 하위 요소가 추가될 때마다 따로 이벤트리스너를 등록하지 않아도 됩니다
Frontend developer