#3 이벤트란?

 

#개발자라면 알아야 할 이벤트

 

이벤트란?

☞ 여러가지 일들을 각각의 상황의 맞게 처리할 수 있는 메뉴얼 같은것

​

• 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() → 이동하는걸 방지

 

 

 

📌참고

김버그 유튜브

https://youtu.be/CFgXIJ3RZ50