Eksekusi bahasa skrip JavaScript perlu dipicu. Pendekatan umum adalah menulis beberapa fungsi secara langsung di halaman web. Beberapa dari mereka diproses oleh browser ketika kode dimuat, atau menggunakan kode yang mirip dengan yang berikut untuk memicu implementasi fungsi yang terkait dengan fungsi.
<Div id = "link" ontClick = "fun ()"> </div>
Kode di atas berarti bahwa ketika mouse mengklik elemen dengan ID sebagai tautan, acara OnClick dipicu, dan kemudian fungsi menyenangkan yang ditentukan menggunakan JavaScript dijalankan. Pendekatan ini jelas tidak masuk akal, karena operasi pemicu secara langsung ditulis ke dalam struktur HTML, dan konten dan perilaku tidak terisolasi, yang akan menyebabkan ketidaknyamanan pada pengembangan atau modifikasi sekunder di masa depan.
Perlu dicatat bahwa ketika pemrosesan peristiwa terikat pada elemen yang sesuai, operasi hanya dapat dilakukan setelah elemen tersebut dimuat. Jika skrip yang diproses ditempatkan di area kepala, browser akan melaporkan kesalahan. Karena elemen HTML berikut belum dimuat, skrip pemrosesan di kepala telah diproses.
Cara yang baik untuk menjalankan kode JavaScript haruslah untuk memisahkan konten perilaku dan memprosesnya setelah pemuatan halaman. Oleh karena itu, saat berhadapan dengan kode JavaScript, kita perlu menggunakan peristiwa pemuatan pendengar dan objek jendela.
Pendengar
Fungsi aktual pendengar adalah memisahkan perilaku dari konten. Di masa lalu, beberapa peristiwa pemicu diperlukan untuk memicu fungsi terkait JavaScript. Sekarang, kami langsung menggunakan pendengar untuk sebuah elemen di JavaScript untuk mendengarkan acara elemen ini. Jika elemen ini dipicu dan fungsi pemrosesan yang sesuai untuk acara ini didefinisikan dalam pendengar, maka fungsi ini akan diproses.
Metode standar W3C disebut AddEventListener, yang didukung oleh IE9, Chrome, Firefox, dan Opera. Metode penulisan adalah:
window.addeventlistener ('muat', fungsi, false);Metode lampiran di awal IE memiliki efek yang sama:
window.attachevent ('onload', fungsi);Metode menggunakan pendengar juga sangat sederhana. Ini untuk pertama -tama mendapatkan elemen di halaman, dan kemudian menggunakan pendengar untuk elemen ini untuk menentukan acara yang didengarkan dan fungsi penanganan acara yang sesuai. Misalnya di atas:
document.getElementById ('tautan'). AddEventListener ('klik', fun, false);Untuk instruksi lebih rinci tentang menggunakan monitor, silakan lihat informasi tambahan di akhir artikel.
Acara Window.onload
Acara Onload hanya akan dipicu ketika seluruh halaman telah dimuat sepenuhnya. Ketika kami menulis kode JavaScript ke acara Onload, kami dapat memastikan bahwa browser akan memproses kode JavaScript kami setelah elemen HTML dimuat. Tulisan Dasar:
window.onload = function () {// code}Dengan cara ini, kode dalam fungsi ini akan diproses setelah pemuatan. Namun, metode ini memiliki kelemahan, yaitu hanya dapat digunakan untuk fungsi ini. Beberapa acara Window.onload tidak dapat muncul di halaman. Jika beberapa peristiwa onload terjadi, konten selanjutnya akan menimpa yang sebelumnya.
Kemudian, kita dapat melakukan ini, menulis semua nama fungsi yang perlu dimuat di acara Window.onload, dan kemudian mendefinisikan fungsi di luar:
window.onload = function () {func1 (); func2 (); } function func1 () {...} fungsi func2 () {...}Meskipun ini OK, ini sangat merepotkan karena kita perlu menulis semua nama fungsi yang akan dimuat, dan akan sangat merepotkan untuk memodifikasi. Tentu saja, harus ada solusi. JQuery menyediakan metode pemuatan multi-skrip yang sangat kuat, jadi harus ada solusi untuk JavaScript asli.
window.onload menangani beberapa fungsi secara bersamaan
Kita perlu menulis fungsi pemrosesan dan melihat kode terlebih dahulu:
function addloadListener (fn) {if (typeof window.addeventListener! = 'tidak terdefinisi') {window.addeventListener ('load', fn, false); } lain jika (typeof document.addeventListener! = 'tidak terdefinisi') {document.addeventListener ('load', fn, false); } lain jika (typeof window.attachevent! = 'tidak terdefinisi') {window.attachevent ('onload', fn); } else {var oldfn = window.onload; if (typeof window.onload! = 'function') {window.onload = fn; } else {window.onload = function () {oldfn (); fn (); }; }}}Mari kita cukup menguraikan fungsi addloadlistener kustom ini, meneruskan nama fungsi sebagai parameter. Ini pertama -tama menentukan apakah browser mendukung pendengar yang relevan. Jika mendukung pendengar, ia menggunakan pendengar untuk mendengarkan peristiwa Onload dari objek jendela, dan kemudian menangani fungsi ini. Kode ini menggunakan pernyataan IF untuk menilai semua peristiwa mendengarkan semua browser dan kompatibel dengan silang-browser.
Kami meletakkan kode ini di bagian atas segmen kode JavaScript, kemudian menentukan fungsi yang relevan di bawah ini, dan kemudian gunakan pernyataan berikut untuk memuat fungsi JavaScript.
addloadlistener (func); function func () {...}Dengan cara ini, fungsi JavaScript apa pun perlu diproses setelah halaman dimuat. Anda dapat menggunakan fungsi AddloadListener secara langsung, dan beberapa fungsi dapat digunakan. Secara umum, yang terbaik adalah memuat semua JavaScript menggunakan acara Onload untuk menghindari situasi yang tidak terduga.