[JavaScript] 이벤트 버블링 - 버블링 제거, 이벤트 위임, 캡쳐링

이번 글은 이벤트 버블링에 대한 설명글이다.

---

 

[ 이벤트 버블링 ]

자식 요소를 선택했는데 부모요소의 이벤트 핸들러까지 동작해버리는 것

 

[ 이벤트 버블링 발생 과정 ]

하나의 요소에 이벤트 발생 => 해당 요소에 이벤트 핸들링 발생 => 부모 요소의 이벤트 핸들러 발생 => 최상단 부모까지 영향

 

---

 

[ 이벤트 버블링에서 target과 currentTarget 차이 ]

- e.target

실제 클릭된 요소(이벤트가 처음 발생한 부분)를 가리키고 버블링이 일어나도 변하지 않음

=> ex. <li>를 클릭했으면 target은 항상 그 <li>가 되고 만약 <li> 내부에 <span>이 있어 그걸 클릭했다면 <span>

target 실행 콘솔

 

- e.currentTarget

지금 실행되고 있는 요소(이벤트 핸들러가 할당된 요소)

=> 이벤트 버블링으로 인해 부모 요소의 이벤트 핸들러가 실행되면 해당 부모의 target을 가리킴

currentTarget 실행 콘솔

 

 

---

 

[ 버블링을 막는 메소드 ]

아래 코드처럼 파라미터로 아무런 값도 전달하지 않고 소괄호를 열고 닫은 뒤 메서드 호출

=> 코드의 흐름을 방해할 수 있어 사용 비추천

function someHander(event) {
  event.stopPropagation();
}

 

 

---

 

[ 이벤트 위임 - 버블링 활용 ]

새로운 자식 요소를 추가 또는 삭제해도 자식 요소의 이벤트에 대한 제어를 신경쓰지 않아도 알아서 해줌

(자식 요소에 대한 동작인 실제로 처리할 로직을 이벤트 핸들러 함수 안에 작성 후 그 핸들러를 자식을 포함하는 부모에 한번만 등록하여 사용하는 형태)

=> 여러 개의 이벤트 핸들러를 만들지 않아도 됨

=> 이벤트를 다룰 때 이벤트 위임을 우선적으로 고려한 후 불가피한 경우에만 이벤트를 개별적으로 부여

before : 자식 요소에 하나하나 이벤트 적용

after : 부모요소에 한번에 이벤트 적용

=> 부모요소에 한번에 적용할 경우 이벤트가 원하지 않는 곳에도 사용될 수 있으므로 타깃의 태그네임, 클래스네임 등으로 조건식을 만들어 해당 조건에 성립될 경우 조건을 실행하는 방식으로 진행

조건식 작성

 

이벤트 위임 시 조건문은 보통 아래 코드와 같이 작성

=> 특정 클래스명을 포함할 때만 실행 (이때 클래스명 앞에 .을 붙이지 않음)

if (event.target.classList.contains('클래스명')

 

=> 특정 태그일 때 실행

if (event.target.TagName === LI)

 

 

---

[ 캡쳐링 ]

캡쳐링은 버블링과 반대되는 개념

=> 이벤트가 타깃에 도달하기 전에 부모가 먼저 처리해야할 때

=> 실제로 코드에서 잘 사용되진 않지만 이벤트 자체의 흐름은 항상 캡쳐→타깃 →버블링 순으로 진행

 

---