Artikel ini menjelaskan penggunaan delegasi acara JavaScript. Bagikan untuk referensi Anda. Analisis spesifiknya adalah sebagai berikut:
1. Klik bagian mana pun dari halaman untuk memicu acara tersebut
Buat file Script1.js.
Salin kode sebagai berikut: (function () {
Evenutility.addevent (dokumen, "klik", fungsi (evt) {
waspada ('halo');
});
} ());
Bagian halaman.
Salin kode sebagai berikut: <head>
<meta http-equiv = "konten tipe" content = "text/html; charset = utf-8"/>
<title> </title>
</head>
<body>
<Script src = "Evenutility.js"> </script>
<skrip src = "script1.js"> </script>
</body>
</html>
Hasil Output: Mengklik salah satu halaman akan muncul.
Namun, kadang -kadang kami ingin mengklik elemen dalam dokumen untuk memicu suatu acara.
2. Gunakan delegasi untuk memicu peristiwa
Tambahkan tag ke halaman.
Salin kode sebagai berikut: <head>
<meta http-equiv = "konten tipe" content = "text/html; charset = utf-8"/>
<title> </title>
</head>
<body>
<div>
<p> <a href = "#"> klik saya </a> </p>
</div>
<Script src = "Evenutility.js"> </script>
<skrip src = "script1.js"> </script>
</body>
Modifikasi Script1.js ke:
Salin kode sebagai berikut: (function () {
Evenutility.addevent (dokumen, "klik", fungsi (evt) {
// Dapatkan Objek Klik
var target = Evenutility.getTarget (EVT);
// Dapatkan nama tag objek klik
var tagname = target.tagname;
// jika tag adalah a
if (tagName === "a") {
peringatan ("klik saya");
// Blokir perilaku default tautan
Evenutility.PreventDefault (EVT);
}
});
} ());
Hasil Output: Kotak hanya akan muncul jika Anda mengklik tag pada halaman.
Manfaat di atas adalah: Tidak peduli berapa banyak elemen tag ditambahkan ke dokumen, semua tag memiliki kemampuan untuk dipicu. Ini adalah commissioning dari acara tersebut. Kami ingin mendaftarkan acara untuk elemen anak, tetapi mendaftarkan acara terlebih dahulu dengan elemen induk dari elemen anak. Dengan cara ini, setiap elemen dari jenis yang sama dengan elemen anak ditambahkan secara dinamis dalam elemen induk.
Jika kami mendaftarkan acara ke elemen anak dan secara dinamis menambahkan elemen dari jenis yang sama dengan elemen anak dalam dokumen, kami harus mendaftarkan acara untuk elemen anak ini yang baru saja ditambahkan secara dinamis.
Selain itu, delegasi acara memanfaatkan "gelembung acara" dengan baik. Saat mengklik elemen anak, menurut "Event Bubble", elemen induk dari elemen anak menangkap acara klik dan memicu metodenya sendiri.
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.