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

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

1. イベントの代表者

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

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

例:

document.getElementById("parent").addEventListener("click", function(event) {
    if (event.target && event.target.matches(".child")) {
        console.log("點擊了子元素：", event.target.textContent);
    }
});

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

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

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

それらは何ですか?

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

例:

スロットリング

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("窗口大小已調(diào)整！");
    }, 200)
);

手ぶれ補正

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("輸入事件觸發(fā)！");
    }, 300)
);

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

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

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

それらは何ですか?

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

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("收到數(shù)據(jù)：", data);
});

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

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

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

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

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

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

例

const button = document.getElementById("myButton");

button.addEventListener(
    "click",
    () => {
        console.log("按鈕被點擊！");
    },
    { once: true }
);

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

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

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

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

イベント ハンドラーの構(gòu)成には、複數(shù)のハンドラーを組み合わせてイベントを順番に処理することが含まれます。

例

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)
);

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

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

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

それらは何ですか?

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

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

例

document.getElementById("parent").addEventListener("click", function(event) {
    if (event.target && event.target.matches(".child")) {
        console.log("點擊了子元素：", event.target.textContent);
    }
});

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

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

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

それらは何ですか?

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

例

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("窗口大小已調(diào)整！");
    }, 200)
);

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

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

結(jié)論

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

以上がJavaScript の高度なイベント処理パターンの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。