Like Lion : 30일차

selectbutton

      const list = ['Python', 'Java', 'JavaScript', 'C#', 'C/C++']
      const $list_member = document.querySelector('.list-member');
      const $btn_select = document.querySelector('.btn-select');

      const makeList = (list, list_group) => {
        list.forEach(li => {
          const list = document.createElement('li');
          const button = document.createElement('button');
          button.setAttribute('type', 'button');
          button.textContent = li;
          list.append(button);
          list_group.append(list);
        });
        $list = document.querySelectorAll('.list-member li');
      };

      const showList = (e) => {
        e.target.classList.toggle('on');
      };

      const select = (targetDisplay, e) => {
        targetDisplay.textContent = e.target.textContent;
        targetDisplay.classList.toggle('on');
      };

      makeList(list, $list_member);
      $btn_select.addEventListener('click', showList);
      $list_member.addEventListener('click', select.bind(this, $btn_select));

만들어야 할 기능들을 순차적으로 잘 정리한 다음에
한단계씩 차례로 만들어 나가는 것이 중요한 것 같다.

이벤트 위임을 잘 익히고 활용해야겠다.

• 처음에는 각각의 리스트 멤버에 이벤트를 걸려고 헛수고를 하는 시간을 보냈다.
  이벤트 위임을 활용하면 상위 노드에만 이벤트를 걸어주면 된다. 하위노드를 클릭해도 이벤트가 전달되어 상위 노드까지 전파되기 때문에.

• 이벤트를 발생시킨 하위노드는 event.target으로 접근할 수 있다.

참고: 이벤트 버블링, 이벤트 캡처 그리고 이벤트 위임까지 • 캡틴판교