공부한 내용
김버그님의 유튜브 강의
DOM 이벤트 플로우 완벽하게 정리해드립니다.
필수 DOM 이벤트 객체 메소드 2개 (면접에서도 묻더라... 부들)
필수 DOM 이벤트
event handler
event handler = event listener = event 콜백함수
이벤트가 발생하면 실행시킬 함수
- addEventListener() 가장 보편적인 이벤트
→ 정교하게 이벤트를 컨트롤 할 수 있음(여러개의 함수 연결 등)
자주 사용하는 DOM 이벤트 유형
사용자 인터페이스 이벤트
- load 리소스의 로딩이 완료되면 실행
- scroll view나 element가 스크롤 될 때 발생
- resize document view의 크기가 변경될 때 발생
Focus 이벤트
- blur element의 포커스가 해제 되었을 때 발생
- focus element가 포커스를 받았을 때 발생
Form 이벤트
- change
<input>, <select>, <textarea>의 값이 변경될 때 발생 - submit 폼이 전송될 때 발생
Mouse 이벤트
- click element 위에서 마우스 포인터를 클릭할 때 발생
- mousedown 마우스 포인터를 element에서 눌렀을 때 발생
- mouseleave 마우스 포인터가 element 및 하위 element 경계를 벗어날 때 발생
- mouseup element 위에서 마우스 포인터 버튼을 땔 때 발생
Keyboard 이벤트
- keydown 키가 처음 눌려질 때 발생
- keypress 문자 값을 발생시키는 키가 처음 눌려질 때 발생
- keyup 키를 뗄 때 발생
-> 항상 관련된 keydown 및 keypress 이벤트에 후속됨
DOM 이벤트 플로우
div를 클릭했을 때 일어나는 일
html, boby 태그에도 동일하게 클릭 event handler가 있을 경우 div를 클릭하면 이벤트가 모두 실행이 된다.
- currentTarget 이벤트 리스너가 등록되어 있는 요소를 반환
- Target 이벤트의 시발점을 반환
=> 이벤트는 실행 순서에 대한 이벤트 플로우를 가진다.
이벤트 플로우
- Capture phase 가장 상위 요소부터 순차적으로 시작됨
- Target phase 이벤트가 시작하는 원인이 실행됨
- Bubble phase 이벤트가 다시 상위 요소로 이동함
=> 이벤트가 중복 실행 될 수 있음
Capture vs Bubble
currentTarget과 target이 일치하지 않는 경우 이벤트가 event flow phase 중 어느 단계에서 실행될지 선택할 수 있음
- 기본값은 Bubble (false)
- capture
target.addEventListener(type, listener[,useCapture]);(true)
e.stopPropagation()
다음에 실행되는 이벤트를 막음
- 브라우저 기본동작인 capture → target → bubble 과정은 막을 수 없음
문제점
body에 stopPropagation을 적용하면 정작 이벤트의 target인 div가 실행되지 않음
e.preventDefault()
이벤트의 캡쳐링과 버블링을 막지 않고 기본적으로 정의된 이벤트의 작동을 취소함
- stopPropagation는 기본 이벤트를 취소 하지 않음
예시)
<body>
<form action="">
<input type="text"/>
<button type="button">제출</button>
</form>
</body>
<script>
const form = document.querySelector('form')
form.addEventListener('submit', (e) => {
e.preventDefault();
});
</script>submit 타입의 button을 누르면 form 태그의 action 속성에 입력한 곳으로 이동하는 것이 기본적인 로직이다.
- 제출 전에 유저가 알맞은 값을 적었을 때 submit을 보내고 싶을 때
→ preventDefault를 적용
