js challenge day 5

Flex Panel Gallery

 

Code

<script>
    const panels = document.querySelectorAll('.panel');
    const toggleOpen = (e) => {
      e.currentTarget.classList.toggle('open')
    }
    // function toggleOpen() {
    //   console.log('Hello');
    //   this.classList.toggle('open');
    // }

    const toggleActive = (e) => {
      if (e.propertyName.includes('flex')) {
        e.target.classList.toggle('open-active');
      }
    }
    panels.forEach(panel => panel.addEventListener('click', toggleOpen));
    panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));
  </script>

 

 

배운점 & 느낀점

classList.toggle이라는 매서드를 처음 사용해봤습니다.

어떤 클래스가 없다면 넣어주고, 있다면 빼주는 식입니다.

 

toggleOpen 함수를 작성할 때 target으로 작성했더니 원하는 이벤트가 일어나지 않았습니다.

target과 currentTarget의 차이점을 알 수 있었습니다.

div 태그로 p태그를 감싸고

<div>

<p>

</div>

이 상황에서 p태그를 클릭하면 p클릭 => div클릭 순으로 이벤트 버블링이 일어나게 되는데,

target속성은 p를 가리키고, currentTarget은 div태그를 카르키게 됩니다.

즉 currentTarget은 이벤트 캡쳐링 ,버블링이 일어나는 상황속에서 현재 타겟을 가르킵니다.