---
title: 事件監聽設計、搭配 if 流程判斷
tags: addEventListener, forEach, if
description:
---

事件監聽設計、搭配 if 流程判斷
---

接續之前的[如何整合 innerHTML 資料](/Q8ugkR87QtyBwlI2KKOQJQ)，現在要的是...

- 針對陣列資料，新增兩個`<buttom>`使用事件監聽`.addEventListener()`，做不同的條件篩選。

**HTML部分**
- 新增`<div>`，增加`class="selectType"`
- `div`內，建立兩個`<buttom>`分別是投幣式、感應支付式，`value`分別是`"投幣"` `"感應支付"`。

<div class="selectType">
  <button type="button" value="投幣">投幣式</button>
  <button type="button" value="感應支付">感應支付式</button>
</div>
<ul class="list"></ul>

**JavaScript部分**
- `document.querySelector('.filterType')`選取`<div>`元素賦予給變數`filterType`。

- `.addEventListener()`監聽`<div>`元素的`click`行為，若點擊按鈕以外的區域，依照點擊所在元素位置`e.target.value`回傳的值，是`undefined`。

- 可用條件式`e.target.value === undefined`判斷==點擊到==按鈕以外的區域，`return`中斷監聽函式執行。

- `chargStation.forEach()`，使用`forEach`將陣列`chargStation`內的物件取出。

- `{name, type, placeNum} = item`，解構賦值把物件屬性`name`、 `type`、`placeNum`取出。

- 每次`chargStation`取出物件資料，條件式把==type屬性資料==跟==點擊所在元素位置`e.target.value`回傳的值==(`type === e.target.value`)做比較。

- 如果為`true`，`forEach()`將==這次==chargStation取出的物件資料，與`<li>`元素組成字串，`+=`賦予給變數`str`。

- `list.innerHTML = str`，把HTML結構字串`str`賦予給HTML`<ul>`元素，成為`<ul>`元素內層的`<li>`結構。

const filterType = document.querySelector('.filterType');

filterType.addEventListener('click', (e) => {
  if (e.target.value === undefined) return;
  let str = '';
  chargStation.forEach(({ name, type, placeNum } = item) => {
    type === e.target.value ? str += `<li>${name}充電站，付費方式為${type}，共有${placeNum}個充電位置</li>` : str += ``;
  })
  list.innerHTML = str;
})

- 最後畫面呈現的是，被`.forEach()`從陣列`chargStation`挑選出來的物件資料。
<br>

### DOM 拉出全域變數進行管理

**連同網頁初始化的程式碼一起看**

- 第24行程式碼，**原先**在函式`init()`作用域內，現在移動到==全域==。
- 移動到全域的**目的**，是要讓監聽按鈕的`click`行為`filterType.addEventListener()`==也能存取到變數`list`==。

const chargStation = [
  {
    name: '豐田',
    type: '投幣',
    placeNum: 10,
  },
  {
    name: '特斯拉',
    type: '感應支付',
    placeNum: 12,
  },
  {
    name: '本田',
    type: '投幣',
    placeNum: 8,
  },
  {
    name: '福特',
    type: '感應支付',
    placeNum: 15,
  },
];

const list = document.querySelector('.list');
const filterType = document.querySelector('.filterType');

function init() {
  let str = '';
  chargStation.forEach(({name, type, placeNum} = item) => {
    str += `<li>${name}充電站，付費方式為${type}式，共有${placeNum}個充電位置</li>`;
  });
  list.innerHTML = str;
};

init();

filterType.addEventListener('click', (e) => {
  if (e.target.value === undefined) return;
  let str = '';
  chargStation.forEach(({ name, type, placeNum } = item) => {
    type === e.target.value ? str += `<li>${name}充電站，付費方式為${type}，共有${placeNum}個充電位置</li>` : str += ``;
  })
  list.innerHTML = str;
})