이벤트 위임

자주 써서 생각 안하고있었는데, 기록해논 적이 없는거같다.

https://velog.io/@moonheekim0118/JavaScript-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%B2%84%EB%B8%94%EB%A7%81

[JavaScript] 이벤트 위임

 

프로젝트 특성상 모달창을 띄울 일이 많은데, 아무래도 fetch로 페이지를 불러오다보니 호출 후에 어떠한 선택자를 반환시키려면..?

이 선택자는 무조건 fetch 이후에 불러오지 않으면 undefined를 반환할것이고, 오류를 낼것이다.

 

이럴때 쓰라고 배운게 이벤트 위임이다.

밑에가 내가 습관적으로 쓰는 코드

modal.addEventListener('click', (e) => {
    const exampleBtn = e.target.closest('.btn-example');
    if (!exampleBtn) return;

    // 이벤트 기능 어쩌구저쩌구
});

 

해당 요소를 찾을 때 querySelector가 아닌 closest를 사용한 이유는 별건 없고 이벤트중 선택자의 조상을 찾을 일이 많아서 똑같이 통일시켜준것이다.