Dream Coding | 쇼핑몰 미니 게임 만들기 5편 / handling events

 

 

마지막으로 setEventListeners의 함수를 만든다.

로고와 버튼을 등록한다.

버튼이 들어있는 컨테이너 자체의 이벤트 리스너를 등록한다.

이것을 이벤트 위임이라고 한다.

하나 하나의 이벤트 리스너를 반복해서 등록하는 것 보다,

버튼들이 들어있는 컨테이너에 이벤트리스너를 등록해서

한 곳에서만 핸들링할 수 있도록 만드는 방법.

 

logo.addEventListener('click', () => displayItems(items));

로고가 선택되면 모든 아이템들이 보여질 수 있도록 하는것.

 

buttons.addEventListener('click', event => onButtonClick(event, items));

버튼이 클릭되면 이벤트를 처리할 수 있도록,

이벤트가 발생한 아이를 인자로 전달해주고,

items도 전달.

 

 

 

 

함수에 정의하기 전, 마크업 부분으로 가서

data-key와 data-value를 정의해준다.

 

 

 

 

그 후에 onButtonClick의 함수를 만들어준다.

dataset안에는 이벤트에 있는 클릭이 된 타겟 요소안에 있는 데이터셋이 들어있다.

 

현재, 이벤트리스너는 버튼이 들어있는 컨테이너에 들어있기때문에

버튼이 아닌 부분을 클릭해도 콘솔로그에 출력이 된다.

 

때문에 key와 value가 null이면 리턴해주는 식을 적어준다.

 

 

그리고 displayItems를 정의해준다.

 

배열에서 특정한 데이터만 추출해서

새로운 배열을 만들때는 filter를 사용한다.

 

필터 내용은, 아이템에 있는 오브젝트안에 key에 해당하는 값이

value와 똑같은 아이들만 골라서 displayItems에 전달한다.

 

 

 

위에 식을 filtered에 변수로 선언해서 사용하면

consol.log 출력이 돼서 헷갈릴때 사용하면 좋다.

 

 

 

**이렇게 만들면 단점이 생긴다.

새롭게 클릭할때마다 요소들을 만들어서

다시 container.innerHTML에 업데이트를 함.

즉, 계속 업데이트를 해야함.

 

개선하기위해서는 전체적으로 리스트를 유지하면서

클릭했을때 해당요소만 보이고, 해당하지 않는 요소는 숨기는 방법이 좋다.

 

 

이런식으로 작성하는 것이 좋음.