ES6 - Acara

JavaScript dimaksudkan untuk menambahkan interaktivitas ke halaman Anda. JavaScript melakukan ini menggunakan mekanisme menggunakan peristiwa.Events adalah bagian dari Model Objek Dokumen (DOM) Level 3 dan setiap elemen HTML berisi serangkaian peristiwa yang dapat memicu Kode JavaScript.

Suatu peristiwa adalah tindakan atau kejadian yang dikenali oleh perangkat lunak. Ini dapat dipicu oleh pengguna atau sistem. Beberapa contoh umum kejadian termasuk pengguna mengklik tombol, memuat halaman web, mengklik hyperlink, dan sebagainya. Berikut adalah beberapa peristiwa HTML umum.

Penangan Acara

Saat kejadian, aplikasi menjalankan serangkaian tugas terkait. Blok kode yang mencapai tujuan ini disebuteventhandler. Setiap elemen HTML memiliki sekumpulan peristiwa yang terkait dengannya. Kita dapat menentukan bagaimana event akan diproses dalam JavaScript dengan menggunakan event handler.

Jenis Peristiwa onclick

Ini adalah jenis peristiwa yang paling sering digunakan yang terjadi saat pengguna mengklik tombol kiri mouse-nya. Anda dapat menempatkan validasi, peringatan, dll. Anda terhadap jenis acara ini.

Contoh

<html> 
   <head> 
      <script type = "text/javascript">  
         function sayHello() {  
            document.write ("Hello World")  
         }   
      </script> 
   </head> 
   
   <body> 
      <p> Click the following button and see result</p> 
      <input type = "button" onclick = "sayHello()" value = "Say Hello" /> 
   </body> 
</html>

Output berikut ditampilkan pada eksekusi yang berhasil dari kode di atas.

Jenis onsubmitEvent

onsubmitadalah peristiwa yang terjadi saat Anda mencoba mengirimkan formulir. Anda dapat menempatkan validasi formulir Anda terhadap jenis acara ini.

Contoh berikut menunjukkan cara menggunakan onsubmit. Di sini kita memanggil fungsi validate () sebelum mengirimkan data formulir ke webserver. Jika fungsi validate () mengembalikan nilai true, formulir akan dikirim, jika tidak maka tidak akan mengirimkan data.

Contoh

<html> 
   <head> 
      <script type = "text/javascript">  
         function validation() {  
            all validation goes here  
            .........  
            return either true or false  
         }   
      </script> 
   </head> 
   
   <body> 
      <form method = "POST" action = "t.cgi" onsubmit = "return validate()"> 
         .......  
         <input type = "submit" value = "Submit" /> 
      </form> 
   </body> 
</html>

onmouseover dan onmouseout

Kedua jenis acara ini akan membantu Anda membuat efek yang bagus dengan gambar atau bahkan dengan teks juga. Ituonmouseover peristiwa terpicu saat Anda mengarahkan mouse ke salah satu elemen dan onmouseout terpicu saat Anda menggerakkan mouse keluar dari elemen itu.

Contoh

<html> 
   <head> 
      <script type = "text/javascript"> 
         function over() {  
            document.write ("Mouse Over");  
         }  
         function out() {  
            document.write ("Mouse Out");  
         }  
      </script> 
   </head> 

   <body> 
      <p>Bring your mouse inside the division to see the result:</p> 
      <div onmouseover = "over()" onmouseout = "out()"> 
         <h2> This is inside the division </h2> 
      </div> 
   </body> 
</html>

Output berikut ditampilkan pada eksekusi yang berhasil dari kode di atas.

Peristiwa Standar HTML 5

Peristiwa HTML 5 standar tercantum dalam tabel berikut untuk referensi Anda. Skrip menunjukkan fungsi JavaScript yang akan dijalankan terhadap acara itu.

Atribut Nilai Deskripsi
offline naskah Dipicu saat dokumen offline
onabort naskah Pemicu acara pembatalan
onafterprint naskah Pemicu setelah dokumen dicetak
onbeforeonload naskah Pemicu sebelum dokumen dimuat
onbeforeprint naskah Pemicu sebelum dokumen dicetak
onblur naskah Dipicu saat jendela kehilangan fokus
oncanplay naskah Dipicu saat media dapat mulai diputar, tetapi mungkin harus berhenti untuk buffering
oncanplaythrough naskah Memicu saat media bisa diputar sampai akhir, tanpa henti untuk buffering
dalam perubahan naskah Dipicu saat elemen berubah
onclick naskah Dipicu saat klik mouse
oncontextmenu naskah Terpicu saat menu konteks dipicu
ondblclick naskah Memicu klik dua kali pada mouse
ondrag naskah Dipicu saat elemen ditarik
ondragend naskah Pemicu di akhir operasi seret
ondragenter naskah Dipicu saat elemen telah diseret ke target pelepasan yang valid
ondragleave naskah Dipicu saat elemen meninggalkan target penurunan yang valid
ondragover naskah Dipicu saat elemen diseret ke target penurunan yang valid
ondragstart naskah Memicu di awal operasi seret
ondrop naskah Dipicu saat elemen yang diseret sedang dijatuhkan
ondurationchange naskah Dipicu saat panjang media diubah
satu kali dikosongkan naskah Dipicu saat elemen sumber daya media tiba-tiba menjadi kosong
onended naskah Memicu saat media telah mencapai akhir
onerror naskah Dipicu saat terjadi kesalahan
sedang fokus naskah Dipicu saat jendela fokus
onformchange naskah Terpicu saat formulir berubah
onforminput naskah Dipicu saat formulir mendapat masukan pengguna
onhaschange naskah Dipicu saat dokumen telah diubah
oninput naskah Dipicu saat elemen mendapatkan input pengguna
oninvalid naskah Dipicu saat elemen tidak valid
onkeydown naskah Terpicu saat tombol ditekan
onkeypress naskah Terpicu saat tombol ditekan dan dilepaskan
onkeyup naskah Dipicu saat kunci dilepaskan
onload naskah Terpicu saat dokumen dimuat
onloadeddata naskah Dipicu saat data media dimuat
onloadedmetadata naskah Dipicu saat durasi dan data media lain dari elemen media dimuat
onloadstart naskah Dipicu saat browser mulai memuat data media
onmessage naskah Terpicu saat pesan dipicu
onmousedown naskah Dipicu saat tombol mouse ditekan
onmousemove naskah Terpicu saat penunjuk mouse bergerak
onmouseout naskah Dipicu saat penunjuk mouse bergerak keluar dari sebuah elemen
onmouseover naskah Dipicu saat penunjuk mouse bergerak di atas elemen
onmouseup naskah Dipicu saat tombol mouse dilepaskan
onmousewheel naskah Terpicu saat roda mouse diputar
online naskah Dipicu saat dokumen offline
online naskah Dipicu saat dokumen online
onpagehide naskah Dipicu saat jendela disembunyikan
onpageshow naskah Terpicu saat jendela terlihat
onpause naskah Terpicu saat data media dijeda
onplay naskah Dipicu saat data media akan mulai diputar
onplaying naskah Dipicu saat data media mulai diputar
onpopstate naskah Terpicu saat riwayat jendela berubah
dalam proses naskah Dipicu saat browser mengambil data media
satu perubahan naskah Terpicu saat kecepatan pemutaran data media berubah
onreadystatechange naskah Terpicu saat status siap berubah
onredo naskah Dipicu saat dokumen melakukan pengulangan
satu ukuran naskah Terpicu saat jendela diubah ukurannya
onscroll naskah Dipicu saat scrollbar elemen sedang di-scroll
onseeked naskah Dipicu saat atribut pencarian elemen media tidak lagi benar, dan pencarian telah berakhir
onseeking naskah Dipicu saat atribut pencarian elemen media benar, dan pencarian telah dimulai
onselect naskah Terpicu saat elemen dipilih
terpasang naskah Dipicu saat ada kesalahan dalam mengambil data media
onstorage naskah Terpicu saat dokumen dimuat
onsubmit naskah Terpicu saat formulir dikirim
onsuspend naskah Dipicu saat browser telah mengambil data media, tetapi dihentikan sebelum seluruh file media diambil
ontimeupdate naskah Terpicu saat media mengubah posisi bermainnya
onundo naskah Dipicu saat dokumen melakukan pengurungan
onunload naskah Dipicu saat pengguna meninggalkan dokumen
onvolumechange naskah Dipicu saat media mengubah volume, juga saat volume disetel ke "bisu"
menunggu naskah Dipicu saat media berhenti diputar, tetapi diperkirakan akan dilanjutkan