JavaScript の高度なイベント処理パターン-jsチュートリアル-php.cn

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

Mary-Kate Olsen

リリース： 2025-01-18 02:32:09

オリジナル

814 人が閲覧しました

Advanced Event Handling Patterns in JavaScript

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

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

イベントの代表者

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

イベント委任とは、単一のイベントリスナーを親要素にアタッチして、その子要素のイベントを管理することを指します。このモードは、ページの読み込み後に 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>

ログイン後にコピー

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

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

スロットルと手ぶれ補正

それらは何ですか?

スロットリング指定された間隔内で関数が最大 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>

ログイン後にコピー

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

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

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

それらは何ですか?

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

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

ログイン後にコピー

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

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

1 回限りのイベント処理

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

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

例

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

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

ログイン後にコピー

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

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

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

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

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

例

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

ログイン後にコピー

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

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

キャプチャとバブリング

それらは何ですか?

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>

ログイン後にコピー

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

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

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

それらは何ですか?

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>

ログイン後にコピー

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