[기술면접] JavaScript 부분 1

<목차>

1. 이벤트 버블링과 캡쳐링
2. 이벤트 위임

1. 이벤트 버블링과 캡쳐링

• 이벤트가 DOM트리를 통해 전파되는 두 가지 방식

이벤트 버블링

• 이벤트가 발생한 요소에서 시작하여 상위 요소로 전파되는 과정
• 버블링 단계에서 이벤트가 발생한 요소부터 DOM트리를 따라 상위로 이동하며 각 요소에서 이벤트를 처리할 수 있음
• 대부분의 이벤트는 버블링 단계에서 처리되며 이는 이벤트 상위 요소에서 감지하고 처리할 수 있게 함

이벤트 캡쳐링

• 이벤트가 상위 요소에서 하위요소로 전파되는 과정
• 캡쳐 단계에서는 루트 요소에서 시작하여 이벤트가 발생한 요소까지 내려감
• 기본적으로 이벤트 리스너는 캡쳐 단계에서는 활성화되지 않지만, 리스너를 등록할 때 캡쳐 단계에서도 반응하도록 설정 할 수있음

이벤트 리스너 등록
자바스크립트에서 addEventListener 함수를 사용하여 이벤트 리스너를 등록할 수 있으며, 세 번째 인자로 캡처 단계에서 이벤트를 감지할지 여부를 결정할 수 있습니다.

코드 복사
// 이벤트 리스너를 버블링 단계에서만 활성화
element.addEventListener("click", function(event) {
  // 이벤트 핸들링 코드
}, false);

// 이벤트 리스너를 캡처 단계에서 활성화
element.addEventListener("click", function(event) {
  // 이벤트 핸들링 코드
}, true);

이벤트 전파 제어
event.stopPropagation(): 현재 이벤트가 더 이상 전파되지 않도록 중단합니다.
event.stopImmediatePropagation(): 현재 요소에서 다른 리스너가 호출되지 않도록 합니다.

Q. 이벤트 버블링과 캡처링에 대해 설명해주세요.

• 이벤트 버블링과 이벤트 캡쳐링은 모두 이벤트가 DOM트리를 통해 전파되는 방식입니다. 먼저 이벤트 버블링의 경우 이벤트가 발생한 요소에서 시작하여 상위요소로 전파되는 과정을 말합니다. 버블링 단계에서는 이벤트가 발생한 요소부터 DOM 트리를 따라 상위로 이동하며 각 요소에서 이벤트를 처리할 수 있습니다. 대부분의 이벤트는 버블링 단계에서 처리되며, 이는 이벤트를 상위 요소에서 감지하고 처리할 수 있게 해줍니다. 이벤트 캡쳐링은 이벤트가 상위요소에서 하위요소로 전파되는 과정을 말합니다. 캡쳐 단계에서는 루트 요소에서 시작하여 이벤트가 발생한 요소까지 내려갑니다. 기본적으로 이벤트 리스너는 캡쳐 단계에서는 활성화되지 않지만, 리스너를 등록할 때 캡쳐 단계에서도 반응하도록 설정할 수 있습니다. 이 두가지 메커니즘을 이해하면 이벤트 핸들링을 더 효과적으로 관리 할 수 있습니다.

2. 이벤트 위임

• 특정 요소에서 발생하는 이벤트를 해당 요소의 부모 또는 상위 요소가 처리하도록 하는 기법
• 동적으로 컨텐츠가 변화할 때 유용
• 코드를 더 효율적으로 만들고 이벤트 핸들러를 관리하는데 도움

이벤트 위임의 장점
1. 메모리 사용 감소 : 개별 자식 요소마다 이벤트 핸들러를 추가하는 대신, 하나의 핸들러만 사용하여 여러 요소의 이벤트를 관리할 수 있음
2. 동적 요소 관리 : 페이지에 동적으로 추가되는 요소들에 대해서도 별도의 이벤트 리스너를 추가하지 않아도, 상위 요소에서 이벤트를 캐치하여 처리 가능
3. 코드 간소화 : 이벤트 리스너를 중앙으로 관리함으로써 코드를 더 간결하고 관리하기 쉽게 만들 수 있음

이벤트 위임 구현 방법

• 이벤트 버블링을 활용
• 부모 요소에 이벤트 리스너를 등록하고 이벤트가 발생했을 때 이벤트 타겟의 타입이나 클래스를 확인하여 적절한 핸들링을 수행

예시
ul요소 내의 모든 li요소를 클릭할 때 이벤트를 처리하는 이벤트 위임

document.querySelector("ul").addEventListener("click", function(event) {
  if (event.target.tagName === "LI") {
    // 이벤트가 li 요소에서 발생했을 때만 처리
    console.log("List item ", event.target.textContent, " was clicked!");
  }
});

Q. 이벤트 위임에 대해 설명해주세요.

• 이벤트 위임은 특정 요소에서 발생하는 이벤트를 해당 요소의 부모 또는 상위 요소가 처리하도록 하는 기법입니다. 이벤트 위임을 구현 하는 방법은 이벤트 버블링을 활용하는 방법이 있습니다. 부모요소에 이벤트 리스너를 등록하고 이벤트가 발생했을 때 이벤트 타겟의 타입이나 클래스를 확인하여 핸들링을 수행합니다. 이벤트 위임의 장점은 자식 요소마다 이벤트 핸들러를 추가하는 대신, 하나의 핸들러만 사용하여 여러 요소의 이벤트를 관리할수 있기 때문에 메모리 사용을 감소 시킬 수 있고 페이지에 동적으로 추가되는 요소들에 대해 별도의 이벤트 리스너를 추가하지 않아도 상위요소에서 이벤트를 캐치하여 처리할 수 있기 때문에 동적요소를 관리하기 좋습니다. 뿐만아니라 이벤트 리스너를 좀더 중앙에서 관리하여 코드를 더 간결하고 관리하기 때문에 코드를 더 간소화 시킬 수 있습니다.