第3回 - click以外のイベント

scroll, resizeイベント

• scrollやresizeイベントはclickイベントより発生頻度が非常に多いため、愚直に実装すると処理が重くなり、パフォーマンスが悪くなる。
• 使用するべきタイミングは存在するが、パフォーマンスを考慮して実行する処理を間引いたりする必要がある。

// ブラウザをスクロールした時
window.addEventListener("scroll", () => {
  const scrollTop = window.scrollY; // 縦スクロール量
  const scrollLeft = window.scrollX; // 横スクロール量

  console.log({ scrollTop, scrollLeft });
});

// ブラウザの大きさを変えた時
window.addEventListener("resize", function () {
  const width = window.innerWidth; // 横幅
  const height = window.innerHeight; // 縦幅

  console.log({ width, height });
});

インスタンスとは？

インスタンスはプログラム上の設計図からnewで作られる具体的な存在で、同じ設計図から何個でも同じ物を作ることができる。

例えば、プログラム上でたい焼きを表現したいとする。

// たい焼きの「設計図」
// インスタンス1つ = たい焼き1個（オブジェクト）として扱う
たい焼きの設計図 {
    最初に必ず実行される関数(具) {
        // 中身に具を入れる
        たい焼きの中身 = "具";
        // たい焼きの状態を設定
        たい焼きの状態 = "焼けていない";
    }

    // このインスタンス（たい焼き）を焼く
    焼く関数() {
        たい焼きの状態 = "焼けている";
    }

    // このインスタンス（たい焼き）の状態を表示
    現在の状態を確認する関数() {
        const 現在の状態 = たい焼きの状態;
        console.log(現在の状態);
    }
}

/***
/* たい焼きの設計図を元に「たい焼き（インスタンス）」を作成する
***/

// あんこのたい焼き（インスタンス）を1個作る
// たい焼き（インスタンス）が作られた時点で「具」を入れている
const anko = new たい焼きの設計図("あんこ");

// カスタードのたい焼き（インスタンス）を1個作る
const custard = new たい焼きの設計図("カスタード");

// まだ焼いていない状態を確認
anko.現在の状態を確認する関数();      // 焼けていない

// 焼く
anko.焼く関数();

// 焼き上がりを確認
anko.現在の状態を確認する関数();      // 焼けている

コールバック関数とは？

コールバック関数は、「あとで呼び出される関数」のこと。

「〇〇が起きたら、この処理を実行してね」という指示を出すときに使用する。

// function() { ... } の部分がコールバック関数
button.addEventListener('click', function() {
  console.log('ボタンが押されました！');
});