Web
#3 이벤트란?
개발중인제이
2023. 1. 27. 23:19
#개발자라면 알아야 할 이벤트
이벤트란?
☞ 여러가지 일들을 각각의 상황의 맞게 처리할 수 있는 메뉴얼 같은것
- event handler = event listener = event 콜백함수
- addEventListener()
- onclick 을 쓸수도 있으나 지금은 잘 쓰지 않음
알아둬야 할 이벤트
| load | change | mouseleave |
| scroll | submit | mouseup |
| resize | click | keydown |
| blur | mousedown | keyup |
| focus | mouseenter |
- dbclick 버그가 많아서 잘 쓰지않음
#이벤트플로우(event flow)
- 프론트엔드 개발자가 목표라면 이벤트에는 어떤 종류가 있고 어떻게 사용하는지 아는것 뿐만 아니라 이벤트가 어떻게 작동하고 있는지 알고 있어야한다.
- html은 중첩된 구조 되어있다.
예를들어,
만약 html → body → div 로 구성 되어 있을때 div에 click 이벤트를 적용했다. 그리고 그것을 클릭했을 때 div를 클릭한게 될까 그의 부모인 body 혹은 그의 부모인 html을 클릭한게 될까?
☞ 이때 브라우저는 body나 html에 똑같이 click 이벤트가 적용되어 있다면 모두 작동 된다. 즉 도미도 처럼 모두 실행이 된다. (이벤트탑승)
- 이렇게 모두 이벤트를 가졌을 경우 때문에 이벤트는 이벤트플로우, 이벤트 흐름을 가진다.
- 브라우저에서 가장 가까운 요소부터 시작된다.
- currentTarget = 이벤트 진짜 주인
- Target = 이벤트의 시발점 , 이벤트가 시작된 시점
- capture phase 처음부터 올라가는것 = propagate up
- target phase 당사자
- bubble phase 다시 내려가는것 = propagate dowm
- 이 흐름은 바꿀수 없는 정해진것
이때,
흐름대로 작동하다 보니 쓸때없이 중복되는 이벤트가 실행된다.
이럴때 event flow phase 중 어느 단계에 실행되고 싶은지 선택 capture vs bubble(기본)
#DOM 이벤트 객체 메소드
만약
capture, bubble 없이 그냥 내가 선택한 요소만 작동 시키고 싶다면? → 이건 절때 바꿀 수 없음
- 대신 propagate 전파 하는것은 막을 수 있다.
- e.stopPropagation() → 내가 선택한 타겟 이후의 것을 작동을 막는것
- 사용하는 경우는 거의 없지만 이런것이 있다는것은 알고 있는것이 좋다.
- 보통 e , evt 를 사용해서 이벤트 사용
- e.preventDefault() → 이동하는걸 방지
📌참고
김버그 유튜브