Cara membuat acara tersuai dalam javascript

mata teras

pengendalian acara JavaScript adalah asas semua aplikasi klien, tetapi ia dikaitkan dengan elemen DOM dan mungkin tidak cukup fleksibel. Acara adat JavaScript menyelesaikan masalah ini, memberikan kelonggaran dan kemudahan penyelenggaraan yang lebih besar.
Membuat acara adat JavaScript termasuk nama, butiran, dan pilihan acara lulus ke objek
• baru. Selepas penciptaan, anda boleh menggunakan kaedah CustomEvent untuk menghantar acara ini pada elemen tertentu. dispatchEvent
Pelbagai pengendali boleh melanggan peristiwa tersuai, supaya tindakan yang berbeza dapat dilakukan berdasarkan peristiwa tersebut. Chrome, Firefox, dan Opera menyokong acara adat, dan beberapa perpustakaan JavaScript juga memberikan sokongan.

pengendalian acara JavaScript adalah asas semua aplikasi klien. Apabila peristiwa berlaku pada elemen sasaran (seperti klik butang, pergerakan tetikus, penyerahan bentuk, dan lain -lain), fungsi pengendali dilaksanakan. Objek acara diserahkan kepada pengendali, yang menyediakan pelbagai sifat dan banyak kaedah untuk menyekat operasi lalai. Satu kelemahan ialah peristiwa yang berkait rapat dengan elemen DOM. Pertimbangkan bentuk mudah yang menerima komen pengguna:

<code class="language-html"><label for="msg">你的留言</label><input type="text" id="msg"><button type="submit" form="msgbox">发送</button>
<form id="msgbox"></form></code>

Apabila menyerahkan borang, kita boleh menulis pengendali untuk echo mesej ke skrin, contohnya:

<code class="language-javascript">document.getElementById("msgbox").addEventListener("submit", function(e) {
    e.preventDefault();
    var msg = e.currentTarget.getElementById("msg").value.trim();
    if (msg) {
        alert(msg);
    }
}, false);</code>

Bagaimana jika kita juga mahu menghantar mesej sebagai tweet, simpan di pelayan, atau lakukan tindakan lain? Untuk kaedah delegasi acara yang sedia ada, kami mempunyai dua pilihan:

1. Tambah lebih banyak kod dalam pengendali sedia ada. Ini tidak cukup fleksibel kerana setiap kali ciri ditambah, diubah, atau dipadam, fungsi pengendali perlu dikemas kini dan diuji. Mesej yang diposkan boleh mempunyai berpuluh -puluh kegunaan, dan kami cuba memohon semuanya ke blok kod yang sama.

2. Buat lebih banyak pengendali acara untuk setiap tujuan. Ini akan menghasilkan kod yang lebih elegan, tetapi akan menyebabkan masalah penyelenggaraan. Pertama, setiap fungsi mesti melaksanakan operasi yang sama untuk mengekstrak dan mengesahkan mesej. Bagaimana jika kita perlu menukar borang? Hanya menamakan semula ID memerlukan menukar kod pengendalian acara untuk setiap pelanggan.

Bukankah lebih baik jika kita hanya dapat mencetuskan acara "NewMessage" adat ketika menyiarkan mesej yang sah? Ia akan menjadi lebih baik jika kita boleh memantau

atau document tag dan bukannya merujuk nod bentuk tertentu. Acara tersuai membolehkan kami melakukan ini. Mencetuskan acara tersuai adalah mudah; body CustomEvent Dalam contoh ini, "NewMessage" adalah jenis acara tersuai. Parameter kedua adalah objek dengan tiga atribut:

• detail: Objek kanak -kanak yang menyediakan maklumat tersuai mengenai peristiwa. Dalam contoh ini, kami menambah mesej dan masa.
• bubbles: Jika true, acara itu akan gelembung kepada nenek moyang unsur yang mencetuskan peristiwa tersebut.
• cancelable: Jika ia true, anda boleh menggunakan kaedah stopPropagation() objek acara untuk membatalkan acara tersebut.

Sekarang, kita perlu menghantar acara ini pada elemen tertentu, contohnya:

<code class="language-html"><label for="msg">你的留言</label><input type="text" id="msg"><button type="submit" form="msgbox">发送</button>
<form id="msgbox"></form></code>

Sebarang bilangan pengendali boleh melanggan acara ini menggunakan kod berikut:

<code class="language-javascript">document.getElementById("msgbox").addEventListener("submit", function(e) {
    e.preventDefault();
    var msg = e.currentTarget.getElementById("msg").value.trim();
    if (msg) {
        alert(msg);
    }
}, false);</code>

halaman demo

Contoh ini menunjukkan teknik: Lihat halaman Demo Acara Custom. Pengendali acara standard mencari penyerahan borang HTML di atas. Fungsi ini mendapat mesej semasa dan mengandaikan ia sah, acara "NewMessage" baru dihantar.

<code class="language-javascript">var event = new CustomEvent(
    "newMessage", 
    {
        detail: {
            message: "Hello World!",
            time: new Date(),
        },
        bubbles: true,
        cancelable: true
    }
);</code>

Pengendali kini boleh melanggan acara "NewMessage". Acara ini dicetuskan hanya jika mesej yang sah wujud, dan sejak bubbles ditetapkan kepada true, peristiwa itu boleh digunakan untuk bentuk atau mana -mana nenek moyangnya, seperti akar document, contohnya:

<code class="language-javascript">document.getElementById("msgbox").dispatchEvent(event);</code>

Mesej

itu sendiri boleh diekstrak dari atribut detail.message objek acara.

Keserasian penyemak imbas

Pada masa penulisan, Chrome, Firefox, dan Opera Sokongan CustomEvent objek. Ia boleh didapati dalam versi Safari setiap malam, jadi kemungkinan akan tersedia dalam penyemak imbas itu tidak lama lagi. Objek ini tidak disokong dalam IE9 dan di bawah. Nasib baik, beberapa perpustakaan JavaScript menyokong perwakilan acara adat, jadi tunggu untuk SitePoint untuk mendapatkan penyelesaian silang pelayar tidak lama lagi.

(bahagian Soalan Lazim ditinggalkan di sini kerana ia tidak sepadan dengan matlamat asal pseudo dan terlalu panjang.)

Atas ialah kandungan terperinci Cara membuat acara tersuai dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!