Context Menu

Question

버튼을 클릭하면 컨텍스트 메뉴가 나타나고, 메뉴를 선택하거나 그 외의 부분을 클릭하면 사라지는 팝 오버 컴포넌트 구현하기

 

Solution

const wrapper = document.querySelector('.wrapper');
const items = document.querySelectorAll('.item');
const contexts = document.querySelectorAll('.context');

function hide(e) {
    for(let x of contexts) {
        if(x.style.display === 'block') {
            x.style.display = 'none';
            x.parentNode.classList.remove('open');
        }
    }
}
function popUp(e) {
    event.stopPropagation();
    for(let x of contexts) {
        if(x.style.display === 'block') {
            x.style.display = 'none';
            x.parentNode.classList.remove('open');
        }
    }
    e.target.classList.add('open');
    const context = e.target.firstElementChild;
    context.style.display = 'block';

}

wrapper.addEventListener('click', hide);
items.forEach(item => {item.addEventListener('click', popUp)});

 

Issue

   1. querySelectorAll은 DOM 컬렉션 객체인 NodeList를 반환한다. NodeList는 유사 배열 객체이면서 이터러블이기 때문에                       Array.prototype.method()를 사용할 수 있다.

 

   2. HTML 요소 사이의 스페이스, 탭, 줄바꿈(개행) 등의 공백 문자는 텍스트 노드를 생성한다. 그래서 부모 요소를 기준으로 자식

       요소를 탐색하기 위해 firstChild를 사용할 경우에 오류 및 원치 않는 결과가 나올 수 있다.

       이를 대신에 firstElementChild를 사용할 수 있다. firstElementChild는 텍스트 노드를 제외하고 요소 노드만을 반환한다.

 

   3.  자식 요소의 이벤트 처리는 이후에 발생하는 부모 요소의 이벤트 처리에 의해 방해받을 수 있다. 이는 이벤트의 버블링 때문에 

        발생하는 현상으로 이벤트 버블링을 막기 위해서는 해당 콜백 함수 내에 stopPropagation()을 통해 방지할 수 있다.

 

Refactoring

const wrapper = document.querySelector('.wrapper');
const items = document.querySelectorAll('.item');

wrapper.addEventListener('click', function(e) {
    const targetElem = e.target;
    event.stopPropagation();
    if(!targetElem.classList.contains('item')) return;
    targetElem.classList.toggle('open');
    items.forEach(function(elem) {
        if(elem !== targetElem) elem.classList.remove('open');
    })
})

document.body.addEventListener('click', function(e) {
    if(e.target.classList.contains('context')) return
    items.forEach(function(elem) {
        elem.classList.remove('open');
    })
})

 

Issue

   1. 모든 요소에 이벤트 리스너를 등록해주는 것은 과부화 문제가 발생할 수 있고 이후 새롭게 추가 될 요소에 새로운 이벤트 리스너를

      등록하는 것 또한 한계가 있다. 이에 상위 부모 요소 노드에만 이벤트 리스너를 등록해 준 뒤 하위 요소 노드에 대한 이벤트 감지는

      캡쳐링을 통해서 이루어 지도록 한다. 

 

    2. classList.add()와 remove()가 아닌 toggle() 메서드 하나만으로 추가 및 제거 기능 구현