Javascriptを使ったユーザーアクションの取り扱い

webデザイナー平尾誠です。
javascriptの学習をやり直していたら、わからないことだらけでした。
今後も逆引き形式でまとめていきますので、わからないところだけをつまんでご覧ください。

Javascriptを使ったユーザーアクションの取り扱い
まとめ：参考図書

Javascriptを使ったユーザーアクションの取り扱い

ユーザー操作時に処理を実行したい時

 &lt;button class="button" text="ボタン"&gt;&lt;/button&gt;

    &lt;script&gt;
        const button = document.querySelector(".button");
        button.addEventListener("click", onClickButton);
        
        function onClickButton () {
            console.log("クリックされました・")
            
        }

    &lt;/script&gt;

イベント発生時に処理を行いたい

addEventListner（）メソッドを用いると、イベント発生時に呼びだす関数を指定できます。

 <button class="button" text="ボタン"></button>

    <script>
       
        const button = document.querySelector(".button");
        
        button.addEventListener("click" , function(){
            console.log("ボタンがクリックされました")
        });
        
    </script>

こうも書けます。

  const button = document.querySelector(".button");
        
        button.addEventListener("click" , onClickButton);
        function onClickButton () {
            console.log("クリックされました");
        }

イベントを一度だけ呼び出したい

一度だけイベントを呼び出したいときはonceを使います。

  const option = {
            once: true
        };

        ducument.querySelector(".button")
            .addEventListener("click", onClickButton, option);

        function onClickButton() {
            alert("ボタンが押されました。");
        };

設定したイベントリスナーを削除したい

removeEventListener()を使えば、イベントリスナーを削除できます。

    <button class="button" text="ボタン"></button>

    <div class="box">ボックス</div>

    <script>
        const box = document.querySelector(".box");
        box.addEventListener("click", onClickButton);


        //  ３秒後にリスナー関数を削除する
        setTimeout(() => {
            box.addEventListener(".click", onClickButton);
        }, 3000);

        function onClickButton() {
            alert("boxがクリックされました");
        };
    </script>

ページが表示されたときに処理をしたい

DOM要素にアクセうすできるようになったタイミングで着火させる、もs気宇は画像が全て読み込まれてから処理を行うときに有効です。

 <main class="large">
        <div class="box">ボックス</div>
        <div class="box">ボックス</div>
        <div class="box">ボックス</div>
    </main>

<script>
window.addEventListener('DOMContentLoaded', () => {
  // .box要素の数を取得する
  const boxNum = document.querySelectorAll('.box').length;
  // ログを出力
  console.log(`.box要素の数は${boxNum}です`);
});
</script>

クリック時に処理をしたい

 <button class="button"></button>

<script>
document.querySelector('.button').addEventListener('click', () => {
  alert('ボタンがクリックされました');
});
</script>

マウスを押したときや動かしたいときに処理をしたい

マウスのドラッグに合わせて画像をアニメーションさせたいとき
フリック操作を実現したい時

イベント名: mousedown：マウスボタンを押したとき; mouseup：マウスボタンを離したとき; mousemove：マウスを動かしたとき

<div id="log"></div>
<script>
const logArea = document.querySelector('#log');

// 対象エリア上でマウスボタンを押したら、ログを出力
logArea.addEventListener('mousedown', () => {
  logArea.innerHTML = `マウスボタンを押した`;
});

// 対象エリア上でマウスボタンを離したら、ログを出力
logArea.addEventListener('mouseup', () => {
  logArea.innerHTML = `マウスボタンを離した`;
});

// 対象エリア上でマウスを移動したら、ログを出力
logArea.addEventListener('mousemove', () => {
  logArea.innerHTML = `マウスを移動した`;
});
</script>

マウスオーバー時に処理をしたいその1

マウスホバー時にインタラクションを実装したいとき

イベント名: mouseenter：マウスが要素上に乗ったとき; mouseleave：マウスが要素上から離れたとき

<div class="box">
            <div class="inner">
            </div>
        </div>


document.querySelector('.box').addEventListener('mouseenter', () => {
  log('.box要素にマウスが乗った');
});

document.querySelector('.inner').addEventListener('mouseenter', () => {
  log('.inner要素にマウスが乗った');
});

function log(message) {
  console.log(message);
}

マウスオーバー時に処理をしたいその2

指定したものをも包括する親要素にも影響を及ぼす（バブリング）するパターンです。

<div class="box">
    <div class="inner">
    </div>
</div>


<script>
document.querySelector('.box').addEventListener('mouseover', () => {
  log('.box要素にマウスが乗った');
});

document.querySelector('.inner').addEventListener('mouseover', () => {
  log('.inner要素にマウスが乗った');
});

function log(message) {
  console.log(message);
}

</script>

マウス操作時の座標を取得したい

マウスのクリック位置を取得したいときや、マウスの動きに合わせて要素を動かしたいときに有効です。

イベント名: event.clientX：ブラウザー左上を基準としたX座標; event.clientY：ブラウザー左上を基準としたY座標; event.offsetX：要素左上を基準としたX座標; event.offsetY：要素左上を基準としたY座標; event.pageX：ページ左上を基準としたX座標; event.pageY：ページ左上を基準としたY座標; event.screenX：デバイス左上を基準としたX座標; event.screenY：デバイス左上を基準としたY座標

<!-- 動かしたいキャラクター画像 -->
<div class="character"></div>


<script>
/** 動かしたいキャラクター */
const character = document.querySelector('.character');

// ページ上でマウスボタンを押したら、キャラクターの移動開始
document.addEventListener('mousedown', () => {
  // マウスの動きに合わせてキャラクターを動かす
  document.addEventListener('mousemove', onMouseMove);

  // ページ上でマウスボタンを離したら、キャラクターの移動を終了
  document.addEventListener('mouseup', () => {
    document.removeEventListener('mousemove', onMouseMove);
  });
});

/**
 * マウスが動いた時の処理
 */
function onMouseMove(event) {
  character.style.left = `${event.clientX - 100}px`;
  character.style.top = `${event.clientY - 100}px`;
}
</script>

スクロール量を測る

scrollイベントは、対象の要素がスクロールしたときに発生します。

// ウインドウ上でスクロールする毎に「スクロール」と座標が出力される
window.addEventListener('scroll', () => {
  console.log('スクロール', window.scrollX, window.scrollY);
});

タッチ操作時に処理をしたい

スマートフォンで画面をタップしたときに行う処理

イベント名: touchstart：タッチを開始したとき; touchmove：タッチポイントを動かしたとき; touchend：タッチを終了したとき

<div class="box">
    <p>タッチ可能デバイスでご確認ください</p>
    <p class="log"></p>
</div>

<script>
// タッチイベントをキャッチするボックス
const targetBox = document.querySelector('.box');
// ログのエリア
const logArea = document.querySelector('.log');

// 画面上でタッチ開始したら、対象内にログを表示
targetBox.addEventListener('touchstart', () => {
  logArea.innerHTML = 'タッチ開始';
});

// 画面上でタッチ位置を移動したら、ログを表示
targetBox.addEventListener('touchmove', () => {
  logArea.innerHTML = 'タッチ位置移動';
});

// 画面上でタッチ位置を移動したら、ログを表示
targetBox.addEventListener('touchend', () => {
  logArea.innerHTML = 'タッチ終了';
});

</script>

タブがバックグランドになった時に処理をしたい

ブラウザのタブがバックグランドになった時に負荷の重い処理を止める

イベント名: visibilitychange：ブラウザの表示状態が変わった時

document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'visible') {
    console.log('コンテンツが表示されました');
    return;
  }

  if (document.visibilityState === 'hidden') {
    console.log('コンテンツがバックグラウンドになりました');
  }
});

画面サイズが変更になった時に処理をする

ウインドウサイズが変更になったとき、小さい時で処理を分けたい時
リサイズ時にレイアウトを調整したい時

イベント名: resize：ブラウザのウインドウサイズが変わった時

<main class="large">
  <p>ウインドウ幅: <span id="widthLog"></span></p>
  <p>ウインドウ高さ: <span id="heightLog"></span></p>
</main>

<script>
/** ウインドウの幅を表示する要素 */
const widthLog = document.querySelector('#widthLog');
/** ウインドウの高さを表示する要素 */
const heightLog = document.querySelector('#heightLog');

// ウインドウがリサイズされる度に処理を実行する
window.addEventListener('resize', () => {
  widthLog.innerText = `${window.innerWidth}px`;
  heightLog.innerText = `${window.innerHeight}px`;
});
</script>