編寫 [委派監聽-互動視窗] 流程 Part.2

Barry YU

4 min readJul 14, 2020

本章節重點是

１. 如何設定委派監聽 ” 去判斷點擊到物件是否包含到指定電影的“ 按鈕 ”

2 . 當按鈕的點擊事件了，但是，該怎麼知道被點擊的電影 ID 是什麼呢？

Step1. 分析問題 ( 續 part 2）

清單及搜尋已經完成後, 使用者需要知道電影介紹內容.

經團隊討論後, 增加點擊按鈕會彈跳出新視窗並顯示「電影詳細內容介紹」

Step2 . 拆解問題：

跳出視窗顯示出 ( Part 1 .已完成）
該如何在API取得的上百部電影, 每一個按鈕都增設監聽器?

3. 如何從彈跳出視窗內有電影詳細內容？

Step3. 尋找答案及方法：

在DOM 插入的內容新增“ 按鈕 ” , （ part 1已完成）
引入 Bootstrap 的 Modal 元件製作互動視窗（Part1已完成）
使用事件委派 (event delegation) 是在API的電影清單設定監聽, 當觸發事件時會確認是否與按鈕相同（本篇實作）
運用 dataset 將特定資訊標註到 HTML 標籤上，再用 JavaScript 取出（本篇實作）
用 axios 發送請求將取得 API 資料，放進 template 的適當位置裡（本篇實作）

STEP4.製作出自己的編寫流程

此次會有兩次框架要製作及新增修改
此次為續Part1 互動視窗 , 此篇為part2 在互動視窗可以看到

Step 1. 編寫監聽器 , 並用console.log ( event. target ) 確認是誰觸發

step 2. 設定DataSet

step 3.

前置框架 ( part . 2)：委派監聽及API串接

繪製區塊
FIGMA 做流程圖示

設委派監聽器

由父元素來集中委派事件 (event delegation)

在 #Data-panel , 「粉紫紅區塊」稱它為：『不會變動的父元素』

dataPanel.addEventListener('click', (event) => { }

透過按鈕MORE 去觸發 Click , 條件如果事件目標就是MORE

dataPanel.addEventListener('click', (event) => {
//who trigger it [ more ]  //if (event.target.matches('.btn-show-movie')) {console.log(event.target)}

取出特定電影的 id 資訊

針對results的id

API :

{
  "results": {
    "id": 1,
    "title": "Jurassic World: Fallen Kingdom",
    "genres": [
      1,
      2,
      15
    ],
    "description": "Several years after the demise of Jurassic World, a volcanic eruption threatens the remaining dinosaurs on the 
    "release_date": "2018-06-06",
    "image": "c9XxwwhPHdaImA2f1WEfEsbhaFB.jpg",
    "director": "Juan Antonio Bayona",
    "cast": [
      {
        "character": "Owen Grady",
        "name": "Chris Pratt"  }  }