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 |