Corak Pengendalian Acara Lanjutan dalam JavaScript

Pengendalian acara JavaScript ialah teras membina aplikasi web interaktif dinamik. Walaupun pengendalian acara asas (cth., addEventListener) adalah mudah, corak lanjutan membolehkan pembangun mengoptimumkan prestasi, mengendalikan interaksi pengguna yang kompleks dan menulis kod yang mudah diselenggara.

Artikel ini meneroka corak pengendalian acara lanjutan dalam JavaScript dan menyediakan contoh praktikal untuk meningkatkan kemahiran pengendalian acara anda.

---

1. Delegasi acara

Apakah itu delegasi acara?

Delegasi acara merujuk kepada melampirkan pendengar acara tunggal pada elemen induk untuk mengurus acara bagi elemen anaknya. Mod ini amat berguna untuk elemen yang ditambah secara dinamik pada DOM selepas halaman dimuatkan.

Contoh:

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

Mengapa menggunakan perwakilan acara?

• Kurangkan bilangan pendengar acara dan tingkatkan prestasi.
• Memudahkan pengurusan elemen ditambah secara dinamik.

---

2. Pendikit dan anti goncang

Apakah itu?

• PendikitMemastikan fungsi dilaksanakan paling banyak sekali dalam selang waktu yang ditentukan.
• AntishakeMelengahkan pelaksanaan fungsi sehingga tempoh masa tertentu telah berlalu sejak acara terakhir.

Contoh:

Pendikit

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

Anti Goncang

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

Mengapa menggunakannya?

• Tingkatkan prestasi dengan mengurangkan panggilan fungsi berlebihan, terutamanya semasa acara frekuensi tinggi seperti mengubah saiz atau menatal.

---

3. Pemancar acara tersuai

Apakah itu?

Pemancar acara tersuai membenarkan pembangun mencipta, menghantar dan mendengar acara mereka sendiri untuk meningkatkan modulariti.

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

Mengapa menggunakannya?

• Pemodulatan dipertingkatkan dan penyahgandingan komponen.
• Memudahkan komunikasi antara bahagian aplikasi yang berlainan.

---

4. Pengendalian acara sekali sahaja

Apakah pemprosesan acara sekali sahaja?

Kadangkala anda hanya memerlukan pengendali acara untuk melaksanakan sekali. JavaScript moden menyediakan cara yang elegan untuk menangani masalah ini.

Contoh

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

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

Mengapa menggunakannya?

• Permudahkan logik peristiwa sekali sahaja.
• Elakkan kebocoran memori dengan mengalih keluar pendengar secara automatik.

---

5. Gabungan pengendali acara

Apakah gubahan pengendali acara?

Komposisi pengendali acara melibatkan penggabungan berbilang pengendali untuk mengendalikan acara secara berurutan.

Contoh

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

Mengapa menggunakannya?

• Pastikan pengendali kecil dan boleh digunakan semula.
• Promosikan kod yang bersih dan boleh diselenggara.

---

6. Tangkap dan Berbuih

Apakah itu?

Aliran acara JavaScript dibahagikan kepada dua peringkat:

• Fasa tangkap: Peristiwa mengalir dari elemen akar ke elemen sasaran.
• Fasa menggelegak: Peristiwa mengalir dari elemen sasaran kembali ke elemen akar.

Contoh

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

Mengapa menggunakannya?

• Memberi fleksibiliti dalam menguruskan penyebaran acara.

---

7. Sekat kelakuan lalai dan hentikan penyebaran

Apakah itu?

• preventDefault() Halang tindakan penyemak imbas lalai (cth. penyerahan borang).
• stopPropagation() Menghalang acara daripada disebarkan kepada pendengar lain.

Contoh

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

Mengapa menggunakannya?

• Menyediakan kawalan yang lebih baik ke atas tingkah laku acara.

---

Kesimpulan

Corak pengendalian acara lanjutan adalah penting untuk membina aplikasi JavaScript yang cekap, interaktif dan mudah diselenggara. Dengan menguasai teknik seperti delegasi acara, pendikitan, pemancar tersuai dan kawalan penyebaran, anda boleh menangani kes penggunaan yang kompleks dengan mudah.

Atas ialah kandungan terperinci Corak Pengendalian Acara Lanjutan dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!