JavaScript　DOM入門

• イベント処理

• フォトギャラリーを作る

イベントとは

ボタンがクリックされる、キーが押されるなど

イベントハンドラとは

イベントに対して行う処理のこと

イベントリスナ

イベントとイベントハンドラを紐づけているもの

イベントリスナの構文

要素オブジェクト.addEventListener(イベントの種類, (e)  => {
イベント処理
}, false);
イベント処理の部分は関数として外に出すこともできる
（例）

const sayHelloButton = document.getElementById('sayHelloButton');

function sayHelloEventHandler(e) {
    console.log('Hello');
};

sayHelloButton.addEventListener('click', sayHelloEventHandler, false);

イベントリスナーを削除

sayHelloButton.removeEventListener('click',sayHelloEventHandler, false);

イベント処理を利用してフォトギャラリーを作る

imgタグに入れる用のsrcとalt属性の入った配列を用意する↓

const images = [
    {src: 'https://hoge1.jpg', alt: 'パッチの画像'},
    {src: 'https://hoge2.jpg', alt: '犬の画像'},
    {src: 'https://hoge3.jpg', alt: '熊の画像'},
    {src: 'https://hoge4.jpg', alt: 'ゴリラの画像'},
    {src: 'https://hoge5.jpg', alt: '山の画像'}
  ];

<img>を作って最初に表示する画像を設定する

let image = document.createElement('img');
image.setAttribute('src', images[0].src);
image.setAttribute('alt', images[0].alt);

html側で親要素を用意する↓小要素の<img>はwidthを小さくする

<div id="main_image"></div>
<div id="thumbnails"></div>

小要素を設定する↓サムネの方はimages配列の要素の数だけ小要素を作成する↓

let mainImage = document.getElementById('main_image');
mainImage.insertBefore(image, null)

let thumbnails = document.getElementById('thumbnails');
for (let i = 0; i < images.length; i++){
    let thumbnailImage = document.createElement('img');
    thumbnailImage.setAttribute('src', images[i].src);
    thumbnailImage.setAttribute('alt', images[i].alt);
    thumbnails.insertBefore(thumbnailImage, null);
  }

サムネをクリックした時のイベントハンドラを設定する↓

thumbnails.addEventListener('click', (e)=>{
    if (e.target.src){
      image.src = e.target.src;
    }
  });

e.target.srcを使うことで画像がクリックされた時のみ実行する