dataset 사용하기

dataset 을 사용하기에 앞서 HTML에 data attribute를 customize 해줘야한다.

<ul class="navbar__menu">
   <li class="navbar__menu__item active" data-link="#home">Home</li>
   <li class="navbar__menu__item " data-link="#about">About</li>
   <li class="navbar__menu__item" data-link="#skills">Skills</li>
   <li class="navbar__menu__item" data-link="#work">My Work</li>
   <li class="navbar__menu__item" data-link="#testimonials">Testmonials</li>
   <li class="navbar__menu__item" data-link="#contact">Contact</li>
</ul>

dataset attribute를 customize 하기 위해서는 data-(변수명) 으로 작성하고 value를 주면 된다.

그럼 dataset 에 -link라는 변수에 값들을 할당한 것이다.

const navbarMenu = document.querySelector(".navbar__menu");
navbarMenu.addEventListener("click", (event) => {
  console.log(event.target.dataset.link);
});