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

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

1. イベントの代表者

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

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

例:

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

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

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

2. スロットルと手ぶれ補(bǔ)正

それらは何ですか?

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

手ぶれ補(bǔ)正

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

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

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

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

それらは何ですか?

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

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!" });

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

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

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

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

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

例

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

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

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

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

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

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

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

例

function composeHandlers(...handlers) {
    return function(event) {
        handlers.forEach((handler) => handler(event));
    };
}

function logClick(event) {
    console.log("點(diǎn)擊：", event.target);
}

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

document.getElementById("myElement").addEventListener(
    "click",
    composeHandlers(logClick, changeBackground)
);

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

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

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

それらは何ですか?

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

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

例

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

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

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

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

それらは何ですか?

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

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

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

結(jié)論

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

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