JavaScript の高度なイベント処理パターン

JavaScript イベント処理は、動的な対話型 Web アプリケーションの構築の中核です。基本的なイベント処理 (addEventListener など) はシンプルですが、高度なパターンを使用すると、開発者はパフォーマンスを最適化し、複雑なユーザー操作を処理し、保守しやすいコードを作成できます。

この記事では、JavaScript の高度なイベント処理パターンを検討し、イベント処理スキルを向上させるための実践的な例を提供します。

---

1. イベントの代表者

イベント委任とは何ですか?

イベント委任とは、単一のイベント リスナーを親要素にアタッチして、その子要素のイベントを管理することを指します。このモードは、ページの読み込み後に DOM に動的に追加される要素に特に役立ちます。

例:

<code class="language-javascript">document.getElementById("parent").addEventListener("click", function(event) {
    if (event.target && event.target.matches(".child")) {
        console.log("点击了子元素：", event.target.textContent);
    }
});</code>

イベント委任を使用する理由は何ですか?

• イベント リスナーの数を減らし、パフォーマンスを向上させます。
• 動的に追加された要素の管理を簡素化します。

---

2. スロットルと手ぶれ補正

それらは何ですか?

• スロットリング指定された間隔内で関数が最大 1 回実行されるようにします。
• アンチシェイク最後のイベントから一定の時間が経過するまで関数の実行を遅延させます。

例:

スロットリング

<code class="language-javascript">function throttle(func, limit) {
    let lastCall = 0;
    return function(...args) {
        const now = Date.now();
        if (now - lastCall >= limit) {
            lastCall = now;
            func.apply(this, args);
        }
    };
}

window.addEventListener(
    "resize",
    throttle(() => {
        console.log("窗口大小已调整！");
    }, 200)
);</code>

手ぶれ補正

<code class="language-javascript">function debounce(func, delay) {
    let timer;
    return function(...args) {
        clearTimeout(timer);
        timer = setTimeout(() => func.apply(this, args), delay);
    };
}

const searchInput = document.getElementById("search");
searchInput.addEventListener(
    "input",
    debounce(() => {
        console.log("输入事件触发！");
    }, 300)
);</code>

なぜそれらを使用するのですか?

• 特にサイズ変更やスクロールなどの高頻度のイベント中に、冗長な関数呼び出しを減らすことでパフォーマンスを向上させます。

---

3. カスタム イベント エミッター

それらは何ですか?

カスタム イベント エミッターを使用すると、開発者は独自のイベントを作成、ディスパッチ、リッスンしてモジュール性を高めることができます。

<code class="language-javascript">const eventEmitter = {
    events: {},
    on(event, listener) {
        if (!this.events[event]) this.events[event] = [];
        this.events[event].push(listener);
    },
    emit(event, data) {
        if (this.events[event]) {
            this.events[event].forEach((listener) => listener(data));
        }
    },
};

eventEmitter.on("dataReceived", (data) => {
    console.log("收到数据：", data);
});

eventEmitter.emit("dataReceived", { id: 1, message: "Hello!" });</code>

なぜそれらを使用するのですか?

• コンポーネントのモジュール化と分離が強化されました。
• アプリケーションの異なる部分間の通信を容易にします。

---

4. 1 回限りのイベント処理

ワンタイムイベント処理とは何ですか?

イベント ハンドラーの実行が 1 回だけ必要な場合があります。最新の JavaScript は、この問題を処理する洗練された方法を提供します。

例

<code class="language-javascript">const button = document.getElementById("myButton");

button.addEventListener(
    "click",
    () => {
        console.log("按钮被点击！");
    },
    { once: true }
);</code>

なぜそれを使用するのですか?

• 1 回限りのイベントのロジックを簡素化します。
• リスナーを自動的に削除することでメモリ リークを回避します。

---

5. イベントハンドラーの組み合わせ

イベントハンドラーの合成とは何ですか?

イベント ハンドラーの構成には、複数のハンドラーを組み合わせてイベントを順番に処理することが含まれます。

例

<code class="language-javascript">function composeHandlers(...handlers) {
    return function(event) {
        handlers.forEach((handler) => handler(event));
    };
}

function logClick(event) {
    console.log("点击：", event.target);
}

function changeBackground(event) {
    event.target.style.backgroundColor = "yellow";
}

document.getElementById("myElement").addEventListener(
    "click",
    composeHandlers(logClick, changeBackground)
);</code>

なぜそれを使用するのですか?

• ハンドラーは小さく再利用可能なものにしてください。
• クリーンで保守しやすいコードを推進します。

---

6. キャプチャとバブリング

それらは何ですか?

JavaScript イベント フローは 2 つの段階に分かれています:

• キャプチャフェーズ: イベントはルート要素からターゲット要素に流れます。
• バブリングフェーズ: イベントはターゲット要素からルート要素に戻ります。

例

<code class="language-javascript">document.getElementById("parent").addEventListener("click", function(event) {
    if (event.target && event.target.matches(".child")) {
        console.log("点击了子元素：", event.target.textContent);
    }
});</code>

なぜそれを使用するのですか?

• イベントの伝播を柔軟に管理できます。

---

7. デフォルトの動作をブロックし、伝播を停止します

それらは何ですか?

• preventDefault() デフォルトのブラウザーアクション (フォーム送信など) を防止します。
• stopPropagation() イベントが他のリスナーに伝播するのを防ぎます。

例

<code class="language-javascript">function throttle(func, limit) {
    let lastCall = 0;
    return function(...args) {
        const now = Date.now();
        if (now - lastCall >= limit) {
            lastCall = now;
            func.apply(this, args);
        }
    };
}

window.addEventListener(
    "resize",
    throttle(() => {
        console.log("窗口大小已调整！");
    }, 200)
);</code>

なぜそれを使用するのですか?

• イベントの動作をより細かく制御できます。

---

結論

高度なイベント処理パターンは、効率的で対話型で保守が容易な JavaScript アプリケーションを構築するために不可欠です。イベント委任、スロットリング、カスタム エミッター、伝播制御などのテクニックを習得することで、複雑なユースケースに簡単に取り組むことができます。

以上がJavaScript の高度なイベント処理パターンの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。