Pada masa awal internet, laman web benar-benar statik - hanya terdapat teks dan gambar. Pasti, kadang-kadang gambar itu adalah gif animasi, tetapi gambar itu hanyalah gambar.
Dengan munculnya JavaScript, menjadi lebih mungkin untuk membuat halaman interaktif yang akan bertindak balas terhadap tindakan seperti mengklik butang atau animasi tatal.
Terdapat beberapa DOM (Document Object Model) peristiwa yang anda boleh mendengar dalam JavaScript, tetapi onclickdan onloadantara biasa yang paling.
Acara Onclick
The onclickacara di JavaScript membolehkan anda melaksanakan fungsi apabila unsur diklik.
Contohnya
Click me function myFunction() { alert('Button was clicked!'); } Dalam contoh mudah di atas, apabila pengguna mengklik butang, mereka akan melihat amaran di penyemak imbas mereka menunjukkan Button was clicked!.
Menambah onclicksecara dinamik
Contoh di atas berfungsi, tetapi secara amnya dianggap sebagai amalan buruk. Sebaliknya, lebih baik memisahkan kandungan halaman (HTML) dari logik (JS).
Untuk melakukan ini, onclickacara dapat ditambahkan secara terprogram ke elemen apa pun menggunakan kod berikut dalam contoh berikut:
click on this element.
const p = document.getElementById("foo"); // Find the paragraph element in the page p.onclick = showAlert; // Add onclick function to element function showAlert(event) { alert("onclick Event triggered!"); } Catatan
Penting untuk diperhatikan bahawa dengan menggunakan onclickkita dapat menambahkan hanya satu fungsi pendengar. Sekiranya anda ingin menambah lebih banyak, gunakan saja addEventListener(), yang merupakan kaedah pilihan untuk menambahkan acara.
Dalam contoh di atas, apabila pengguna mengklik paragraphelemen di html, mereka akan melihat tanda yang menunjukkan onclick Event triggered.
Mencegah tindakan lalai
Tetapi jika kami melampirkan onclickpautan ( atag HTML ), kami mungkin mahu mencegah tindakan lalai berlaku:
Guides const link = document.getElementById("bar"); // Find the link element link.onclick = myAlert; // Add onclick function to element function myAlert(event) { event.preventDefault(); alert("Link was clicked but page was not open"); } Dalam contoh di atas kami menghalang tingkah laku lalai aelemen (membuka pautan) menggunakan fungsi panggilan balik event.preventDefault()kami onclick.
Acara Beban
The onloadevent digunakan untuk melaksanakan fungsi JavaScript selepas halaman telah dimuatkan.
Contoh:
const body = document.body; body.onload = myFunction; function myFunction() { alert('Page finished loading'); } Yang boleh dipendekkan menjadi:
document.body.onload = function() { alert('Page finished loading'); } Dalam contoh di atas, sebaik halaman web dimuat, myFunctionfungsi akan dipanggil, menunjukkan Page finished loadingperingatan kepada pengguna.
The onloadevent biasanya melekat pada unsur. Kemudian setelah halaman dimuat, yang merangkumi semua gambar, dan fail CSS dan JS, skrip anda akan berjalan.
Maklumat lanjut:
Ini hanya dua daripada banyak peristiwa DOM yang boleh anda manipulasi dengan JavaScript, tetapi merupakan antara yang sering digunakan.
Tetapi kadang-kadang anda tidak perlu sama sekali mendengarkan acara DOM, dan ingin menggunakan acara berdasarkan masa seperti undur. Untuk tutorial ringkas mengenai peristiwa masa, baca artikel ini.