就來寫個事件處理，小試身手一下

建立 `id` 屬性

在 img 的屬性中建立一個 id 為 Pic 的屬性，讓 Javascript 來選取。

html

<body>
  <img src="./images/logo.jpg" id="Pic" width="300" height="400" alt="Logo">
</body>

小提醒

Pic 為自行定義的名稱，Away 習慣為 id 設置的值以大駝峰命名。

為不同的事件類型建立監聽器

從文件中，選取欲綁定事件的 DOM 物件。
js
```
document.querySelector('#Pic')
```
1

建立事件監聽器。

document.querySelector('#Pic').addEventListener();

加入 事件類型 與 執行事項 兩個參數。

document.querySelector('#Pic').addEventListener('click', () => {});

以下為授課的教學案例:

document.querySelector('#Pic').addEventListener('click', () => {
  console.log('click');
});

document.querySelector('#Pic').addEventListener('mouseenter', () => {
  console.log('mouseenter');
});

document.querySelector('#Pic').addEventListener('mouseleave', () => {
  console.log('mouseleave');
});

設定 DOM 的屬性、值

從文件中，選取欲設定屬性的 DOM 物件。
js
```
document.querySelector('#Pic');
```
1
設定影像 src 的屬性，影像的路徑以字串來表示。
js
```
document.querySelector('#Pic').src = '';
```
1

寫入影像的路徑。

document.querySelector('#Pic').src = './images/b5.jpg';

利用索引值來選取對象

html

<figure class="wrap-head" id="Thumb">
  <img class="img-resp img-rounded hover-weak" src="./images/s1.jpg" width="100" height="65">
  <img class="img-resp img-rounded hover-weak" src="./images/s2.jpg" width="100" height="65">
  <img class="img-resp img-rounded hover-weak" src="./images/s3.jpg" width="100" height="65">
  <img class="img-resp img-rounded hover-weak" src="./images/s4.jpg" width="100" height="65">
  <img class="img-resp img-rounded hover-weak" src="./images/s5.jpg" width="100" height="65">
</figure>

querySelectorAll()

可選取出相同的 DOM 並以 NodeList 類陣列的方式回傳。

console.log(document.querySelectorAll('#Thumb .img-resp'));

之後便可以用索引方式選取 DOM，索引值由 0 開始。

// 選取此選取器的第一個
console.log(document.querySelectorAll('#Thumb .img-resp')[0]);

// 選取此選取器的第二個
console.log(document.querySelectorAll('#Thumb .img-resp')[1]);

children

可選取出指定 DOM 的子層元素並以 HTMLCollection 類陣列的方式回傳。

console.log(document.querySelector('#Thumb').children);

之後便可以用索引方式選取 DOM，索引值由 0 開始。

// 選取指定 DOM 的子層元素並取出第一個
console.log(document.querySelector('#Thumb').children[0]);

// 選取指定 DOM 的子層元素並取出第二個
console.log(document.querySelector('#Thumb').children[1]);

就來寫個事件處理，小試身手一下 ​

建立 id 屬性 ​

為不同的事件類型建立監聽器 ​

設定 DOM 的屬性、值 ​

利用索引值來選取對象 ​

querySelectorAll() ​

children ​