###### tags:`ALPHACampWeek6_學期2-2`

dataset HTML內建類別;該怎麼知道被點擊的Button id?
===

dataset原理
---
我們可以用 dataset 在 HTML 標籤上紀錄客製化的資訊，也就是在 HTML 標籤中定義 data-* 的屬性。例如以下範例中的 data-user 、data-id、data-date-of-birth ：

<div id="user" data-id="1234567890" data-user="ac-genie" data-date-of-birth>AC Genie</div>

然後我們可以呼叫 dataset. 來取得這些屬性的值，你會發現這些值的型態都是字串*：

const el = document.querySelector('#user');
console.log(el.dataset.user)
//ac-genie
console.log(el.dataset.id)
//1234567890
console.log(el.dataset.dateOfBirth)
//(空字串)

你可能會注意到在 HTML 標籤中，有用一個連字符 (-) 去分隔每個屬性的名稱，至於 JavaScript 則用點記法 (dot notation) 來標記 dataset 的屬性，而名稱維持不變。這個作法讓 JavaScript 能夠直接取用儲存在 HTML 標籤中的資訊。

dataset應用
---
讓我們在電影卡片的 More button 標籤中，新增一個 data-id="${item.id}" 的屬性，也就是說，在動態組合樣板的時期，不只拿每部電影的 title 和 image 屬性，連 id 屬性也要放進來：

data.forEach((item) => {
    // title, image, id 隨著每個 item 改變
    rawHTML += `<div class="col-sm-3">
    <div class="mb-2">
      <div class="card">
        <img src="${
          POSTER_URL + item.image
        }" class="card-img-top" alt="Movie Poster">
        <div class="card-body">
          <h5 class="card-title">${item.title}</h5>
        </div>
        <div class="card-footer">
          <button class="btn btn-primary btn-show-movie" data-bs-toggle="modal" data-bs-target="#movie-modal" data-id="${item.id}">More</button>
          <button class="btn btn-info btn-add-favorite">+</button>
        </div>
      </div>
    </div>
  </div>`
  })
  dataPanel.innerHTML = rawHTML
}

儲存好屬性之後，接著將點擊事件的回傳值改成 event.target.dataset.id：

dataPanel.addEventListener('click', (event) => {
  if (event.target.matches('.btn-show-movie')) {
    console.log(event.target.dataset.id)  // 修改這裡
  }
})