event target 포커싱하기

문제

이벤트 위임(Event Delegation)을 위해 최상위 부모 컨테이너에 이벤트 핸들러를 바인딩해줄 경우 해당 요소 내부에 자식 요소들이 또 한번 부모(ParentElem)-자식(ChildElem) 관계를 이루고 있고 두 요소가 레이아웃 상 완전히 겹쳐져 있을 때 문제가 발생하였다.

 

예를 들어 click 이벤트를 생각해보자.

ParentElem에서 click 이벤트에 대한 후속 처리를 하고 싶지만 웹 상에서 ChildElem이 wrapper인 ParentElem과 위치 값이 겹쳐져 있고 크기가 같을 경우에는 ParentElem이 아닌  ChildElem이 계속해서 선택이 되어 원하는 결과를 얻지 못할 수 있다.

---

<div class="leaflet">
        <div class="page" data-page="1">
            <div class="page-face cover-page">
                <p> </p>
                <h1 class="menu-header-title"> /h1>
            </div>
            <div class="page-face">
                    <div class="menu-item">
                        <figure class="menu-item-photo" style="background-image: url(./images/profileImg.JPG);"></figure>
                        <div class="menu-item-info">
                            <p class="member-name"> p>
                            <p class="member-info"> </p>
                        </div>
                        <button class="back-btn"> </button>
                    </div>
            </div>
        </div>
        
        (...)
        
        </div>

다음과 같이 모든 요소를 감싸는 container인 leaflet 태그에 클릭 이벤트 핸들러를 등록하고 캡쳐링(Event Capturing)을 통해 원하는 요소에 대해 이벤트 처리를 하고자 했으나 모든 요소들의 같은 위치 값 및 크기 값이 같아 웹 상에서 클릭하였을 때 원하는 결과를 얻지 못하였다.

 

문제해결

우선, getTarget 이라는 함수에 다음과 같이 현재 이벤트 대상이 된 요소와 실제 타겟팅되어야 할 요소의 클래스명을 인자값으로 넘겨준다.

leaflet.addEventListener('click', e => {
        let pageElem = getTarget(e.target, 'page');
 }

getTarget 함수에는 인자로 넘어 온 이벤트 대상이 된 요소의 클래스명이 마찬가지로 인자값으로 넘어 온 타켓팅이 되어야 할 요소의 클래스명을 포함하고 있지 않다면 현재 참조되는 이벤트 대상의 부모 요소를 식별되고 있는 변수에 재할당하여 다음 루프로 넘어가게 코드를 작성하였다.

 

마지막으로 해당 클래스명을 지닌 요소가 없어 body태그까지 거슬러 올라갔다면 null값을 반환해주고 함수는 종료된다.

 

전체적으로 버블링(Bubbling)과 비슷한 동작 원리이지만 해당 함수는 이벤트 핸들러가 바인딩되어 있지 않는 타켓팅 예정 요소 또한 쉽게 선택할 수 있다는 장점이 있다.

function getTarget(elem, className) {
        while(!elem.classList.contains(className)) {
            elem = elem.parentNode;

            if(elem.nodeName === 'BODY') {
                elem = null;
                return;
            }
        }
        return elem;
    }