Apakah event.target dalam JavaScript?

Sebuah “ peristiwa ” berlaku apabila keadaan objek berubah. Aktiviti pengguna, seperti menekan sebarang kekunci atau mengklik tetikus, boleh menyebabkan peristiwa berlaku. Terdapat beberapa sifat acara dalam JavaScript yang membantu dalam fungsi pengendalian acara. ' acara.sasaran ” adalah salah satu daripadanya yang mengenal pasti unsur tertentu yang mencetuskan peristiwa itu.

Siaran ini akan menggambarkan 'event.target' dan penggunaannya dalam JavaScript.

Apakah 'event.target' dalam JavaScript?

' acara.sasaran ” ialah sifat/sifat “ peristiwa ” dalam JavaScript. Ia merujuk kepada elemen yang mencetuskan peristiwa. Untuk mengakses atribut event.target, acara elemen mesti didengari. ' addEventListener() ” kaedah digunakan untuk mendengar acara tertentu.

Sintaks

Untuk menggunakan sifat 'event.target', ikut sintaks yang diberikan:

unsur. addEventListener ( ' ' , fungsi ( peristiwa ) {

konsol. log ( peristiwa. sasaran )

} )

Dalam sintaks yang diberikan,

' addEventListener() ” kaedah digunakan untuk menambah pengendali acara untuk elemen tertentu.
“ ” menunjukkan sebarang peristiwa, seperti “ klik ”, “ tetikus ', dan sebagainya.

Contoh

Dalam contoh yang diberikan, kami akan mendapat elemen yang mencetuskan acara menggunakan ' acara.sasaran ” harta benda.

Di sini, kami akan membuat butang dengan memberikan id ' btn ” yang digunakan dalam JavaScript untuk mengakses butang:

< id butang = 'btn' > Tekan di sini butang >

Dalam fail JavaScript, pertama, kami akan mendapat rujukan butang menggunakan id yang ditetapkan dengan bantuan ' getElementById() ' kaedah:

const butang = dokumen. getElementById ( 'btn' ) ;

Lampirkan pendengar acara dengan butang. ' klik ” acara dimulakan pada klik butang dan objek acara diserahkan kepada pendengar acara sebagai hujah. ' acara.sasaran ” atribut boleh diakses daripada fungsi pendengar untuk mendapatkan rujukan kepada elemen butang yang mencetuskan acara:

butang. addEventListener ( 'klik' , fungsi ( peristiwa ) {

konsol. log ( 'Acara sasaran:' , acara. sasaran ) ;

} ) ;

Output menunjukkan rujukan butang tertentu yang diklik:

Anda boleh mendapatkan lebih banyak maklumat dan menggunakan fungsi yang berbeza seperti penggayaan pada acara yang disasarkan menggunakan atributnya.

Apakah Atribut 'event.target'?

Terdapat pelbagai atribut sifat 'event.target' yang memberikan maklumat tentang elemen sasaran. Beberapa atribut biasa objek event.target adalah seperti berikut:

acara.sasaran Atribut	Penerangan
acara.sasaran.tag	Digunakan untuk mendapatkan ' nama ” daripada teg HTML elemen sasaran.
acara.sasaran.nilai	Gunakan untuk mendapatkan semula ' nilai ” daripada elemen sasaran. Atribut ini kebanyakannya digunakan untuk elemen input.
event.target.id	Untuk mendapatkan ' ID ” atribut elemen sasaran, gunakan atribut yang diberikan.
event.target.classList	Senarai ' kelas ” yang mengandungi elemen sasaran diakses oleh atribut ini.
event.target.textContent	Digunakan untuk mendapatkan ' kandungan teks ” daripada elemen sasaran.
event.target.href	Atribut ini mendapatkan semula ' href ” atribut elemen sasaran, seperti pautan.
acara.sasaran.gaya	Untuk mengubah suai ' CSS ” sifat unsur sasaran, gunakan atribut ini.

Contoh 1: Tukar Warna Latar Belakang Elemen Sasaran

Dalam contoh yang disediakan, kami akan menukar warna latar belakang elemen sasaran menggunakan ' gaya atribut ' pada ' klik ' acara:

const butang = dokumen. getElementById ( 'btn' ) ;

butang. addEventListener ( 'klik' , fungsi ( peristiwa ) {

peristiwa. sasaran . gaya . warna latar belakang = 'biru' ;

} ) ;

Pengeluaran

Contoh 2: Dapatkan Nilai Elemen Sasaran

Cipta medan teks input dan kawasan untuk menunjukkan teks menggunakan tag

. Berikan id pada medan input dan tag

sebagai “ takeInput ” dan “ tunjuk ”, masing-masing:

< jenis input = 'teks' ID = 'takeInput' >

< p id = 'tunjukkan' > hlm >

Dapatkan rujukan medan teks menggunakan ' getElementById() ' kaedah:

adalah input = dokumen. getElementById ( 'takeInput' ) ;

Menggunakan ' nilai atribut ” dengan “ acara.sasaran ” untuk mendapatkan nilai elemen yang disasarkan:

input. addEventListener ( 'input' , ( peristiwa ) => {

dokumen. getElementById ( 'tunjukkan' ) . innerHTML = peristiwa. sasaran . nilai ;

} )

Seperti yang anda lihat bahawa nilai yang dimasukkan dalam kotak teks telah berjaya diambil menggunakan ' nilai ” atribut:

Itu semua tentang 'event.target' dalam JavaScript.

Kesimpulan

' acara.sasaran ” merujuk kepada elemen yang mencetuskan/memulakan peristiwa. Terdapat beberapa atribut sifat 'event.target' yang memberikan maklumat tentang elemen sasaran. Sebagai contoh, ' acara.sasaran.tag ”, “ .nilai ”, “ .ID ”, “ .gaya ', dan sebagainya. Siaran ini menggambarkan 'event.target', atributnya dan penggunaannya dalam JavaScript.

Apakah event.target dalam JavaScript?