Posting ini akan mengilustrasikan 'event.target' dan penggunaannya dalam JavaScript.
Apa itu 'event.target' dalam JavaScript?
“ acara.target ” adalah properti/atribut dari “ peristiwa ” dalam JavaScript. Ini merujuk pada elemen yang memicu peristiwa tersebut. Untuk mengakses atribut event.target, event elemen harus didengarkan. “ addEventListener() ” metode digunakan untuk mendengarkan acara tertentu.
Sintaksis
Untuk menggunakan properti “event.target”, ikuti sintaks yang diberikan:
elemen. addEventListener ( '
menghibur. catatan ( peristiwa. target )
} )
Dalam sintaks yang diberikan,
- “ addEventListener() ” metode digunakan untuk menambahkan event handler untuk elemen tertentu.
- “
” menunjukkan peristiwa apa pun, seperti “ klik ”, “ gerakan mouse ', dan seterusnya.
Contoh
Dalam contoh yang diberikan, kita akan mendapatkan elemen yang memicu event menggunakan “ acara.target ' Properti.
Di sini, kita akan membuat tombol dengan menetapkan id “ btn ” yang digunakan dalam JavaScript untuk mengakses tombol:
< tombol id = 'btn' > Klik disini tombol >
Dalam file JavaScript, pertama-tama, kita akan mendapatkan referensi tombol menggunakan id yang ditetapkan dengan bantuan tombol “ getElementById() ' metode:
const tombol = dokumen. getElementById ( 'btn' ) ;Lampirkan pendengar acara dengan tombol. “ klik ” acara dimulai dengan klik tombol, dan objek acara diteruskan ke pendengar acara sebagai argumen. “ acara.target ” dapat diakses dari fungsi pendengar untuk mendapatkan referensi ke elemen tombol yang memicu kejadian:
tombol. addEventListener ( 'klik' , fungsi ( peristiwa ) {menghibur. catatan ( 'Menargetkan acara:' , peristiwa. target ) ;
} ) ;
Output menunjukkan referensi dari tombol tertentu yang diklik:
Anda bisa mendapatkan lebih banyak informasi dan menerapkan berbagai fungsi seperti penataan gaya pada acara yang ditargetkan menggunakan atributnya.
Apa Atribut 'event.target'?
Ada berbagai atribut properti “event.target” yang memberikan informasi tentang elemen target. Beberapa atribut umum dari objek event.target adalah sebagai berikut:
| atribut event.target | Keterangan |
| acara.target.tagname | Digunakan untuk mendapatkan “ nama ” dari tag HTML elemen target. |
| peristiwa.target.nilai | Gunakan untuk mengambil “ nilai ” dari elemen target. Atribut ini banyak digunakan untuk elemen input. |
| event.target.id | Untuk mendapatkan “ pengenal ” dari elemen target, gunakan atribut yang diberikan. |
| event.target.classList | Daftar “ kelas ” yang berisi elemen target diakses oleh atribut ini. |
| event.target.textContent | Digunakan untuk mendapatkan “ konten teks ” dari elemen target. |
| acara.target.href | Atribut ini mengambil “ href ” dari elemen target, seperti link. |
| acara.target.style | Untuk memodifikasi “ CSS ” dari elemen target, gunakan atribut ini. |
Contoh 1: Ubah Warna Latar Belakang Elemen Target
Dalam contoh yang diberikan, kami akan mengubah warna latar belakang elemen target menggunakan tombol “ gaya ” pada atribut “ klik ' peristiwa:
const tombol = dokumen. getElementById ( 'btn' ) ;tombol. addEventListener ( 'klik' , fungsi ( peristiwa ) {
peristiwa. target . gaya . warna latar belakang = 'biru' ;
} ) ;
Keluaran
Contoh 2: Dapatkan Nilai Elemen Target
Buat kolom teks masukan dan area untuk menampilkan teks menggunakan tag
. Tetapkan id ke kolom input dan tag
sebagai “ takeInput ' Dan ' menunjukkan ”, masing-masing:
< tipe masukan = 'teks' pengenal = 'ambilMasukan' >< p id = 'menunjukkan' > P >
Dapatkan referensi bidang teks menggunakan “ getElementById() ' metode:
adalah masukan = dokumen. getElementById ( 'ambilMasukan' ) ;Menggunakan ' nilai ” dengan atribut “ acara.target ” untuk mendapatkan nilai elemen yang ditargetkan:
memasukkan. addEventListener ( 'memasukkan' , ( peristiwa ) => {dokumen. getElementById ( 'menunjukkan' ) . innerHTML = peristiwa. target . nilai ;
} )
Seperti yang Anda lihat, nilai yang dimasukkan dalam kotak teks telah berhasil diambil menggunakan tombol “ nilai ” atribut:
Itu semua tentang 'event.target' di JavaScript.
Kesimpulan
“ acara.target ” mengacu pada elemen yang memicu/memulai peristiwa. Ada beberapa atribut dari properti “event.target” yang memberikan informasi tentang elemen target. Contohnya, ' acara.target.tagname ”, “ .nilai ”, “ .pengenal ”, “ .gaya ', dan seterusnya. Posting ini mengilustrasikan 'event.target', atributnya, dan penggunaannya dalam JavaScript.