wrapper 이벤트리스너 사용 최소화하기

        // const tabRare = document.getElementById('Rare')
        // const tabNormal = document.getElementById('Normal')

        // tabRare.addEventListener('click',(e)=>{
        //     e.stopPropagation()
        //     ...
        // })

        // tabNormal.addEventListener('click',(e)=>{
        //     e.stopPropagation()
        //     ...
        // })

        
        wrapper.addEventListener('click',e => {
            e.stopPropagation()
            const targetElem = e.target
            if(targetElem.id === 'Rare' | targetElem.id === 'Normal'){//tab
                ...
            }
        })

개별로 이벤트를 거는것보다 상위 부모에 이벤트 딱하나를 걸어서 e.target을 활용하는것이 더 효율적이라고한다.

즉 이벤트리스너는 최소화하는 작업이 필요하다.

 

하위요소가 아닌경우에는 전부 return하거나

위의 코드처럼 하위요소에 일치하는경우에만 기능을 작동시키면 좋은것같다.