[JavaScript] 이벤트 버블링 간단 정리

참고 : https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/

이벤트 버블링, 이벤트 캡처 그리고 이벤트 위임까지

 

이벤트 버블링

---

특정 엘리먼트에 이벤트를 달아줘도 해당 엘리먼트에서만 발생하는것이 아닌

최상위 부모 까지 이벤트가 차례대로 발생되는것을 말함

 

 

 

 

이벤트 캡쳐

---

이벤트 버블링과는 반대로

최상위부모 부터 이벤트가 차례가 발생되는것을 말함

 

addEventListener 등록 시 세번째 파라미터에 옵션 추가

{
	capture: true // 디폴트 false
}

 

 

 

 

event.stopPropagation

---

이벤트 버블링 발생을 막는 함수

특정 엘리먼트에서 이벤트 발생 시 선택한 엘리먼트에서만 발생

 

 

 

 

이벤트 위임

---

상위 엘리먼트에 이벤트를 달아줘서 이벤트 버블링으로 해당 엘리먼트의 하위 엘리먼트들에게 이벤트 적용시키는 방법

하위 엘리먼트중 특정 엘리먼트에만 적용 하고싶다면 이벤트 콜백함수에 로직을 구성