Hallo sobat, tulisan kali ini Saya ingin membahas tentang pengenalan dan bagaimana cara menggunakan EVENT pada JavaScript. EVENT pada JavaScript adalah sebuah kejadian yang terjadi pada suatu elemen. Misalnya, Anda mempunyai sebuah button “show” pada aplikasi, dan saat button tersebut di klik akan menampilkan sebuah alert/notifikasi. Untuk menerapkan itu, Anda harus memasukan atribut EVENT title pada elemen button tersebut dan mengisinya dengan sebuah function atau kode JavaScript inline yang berisi kejadian yang Anda inginkan. Itulah penjelasan singkat dan contoh pengandaian dari EVENT JavaScript, mudah-mudahan sobat semua paham ya.
JavaScript telah menyediakan banyak keyword EVENT canggih. Namun pada tulisan ini Saya akan mengenalkan event-event JavaScript yang paling sering digunakan saja, di antaranya yaitu:
- OnClick
- OnChange
- OnMouseOver & OnMouseOut
- OnKeyDown
- OnLoad
Yuk, mari kita bahas satu persatu EVENT JavaScript di atas langsung dengan contohnya.
OnClick
OnClick adalah suatu kerjadian yang terjadi ketika sebuah elemen html di klik.
This example demonstrates how to assign an " title" event to a p element.
Click me.
function myFunction[] { document.getElementById["demo"].innerHTML = "YOU CLICKED ME!"; }OnChange
OnChange adalah suatu kejadian yang terjadi ketika sebuah elemen html berubah.
Select a new car from the list.
Audi BMW Mercedes VolvoWhen you select a new car, a function is triggered which outputs the value of the selected car.
function myFunction[] { var x = document.getElementById["mySelect"].value; document.getElementById["demo"].innerHTML = "You selected: " + x; }Baca Juga: Membuat RESTful API Sederhana dengan PHP
OnMouseOver & OnMouseOut
OnMouseOver adalah suatu kejadian yang terjadi ketika sebuah elemen html di letakkan cursor mouse. OnMouseOut adalah suatu kejadian yang terjadi ketika cursor mouse meninggalkan elemen html.
This example demonstrates how to assign an "onmouseover" and "onmouseout" event to a h1 element.
Mouse over me
function mouseOver[] { document.getElementById["demo"].style.color = "red"; } function mouseOut[] { document.getElementById["demo"].style.color = "black"; }OnKeyDown
OnKeyDown adalah suatu kejadian yang terjadi ketika ada pengetikan pada elemen html.
A function is triggered when the user is pressing a key in the input field.
function myFunction[] { var inputText = document.getElementById["input"].value; document.getElementById["text"].innerHTML = inputText; }OnLoad
OnLoad adalah suatu kejadian yang terjadi ketika elemen dan halaman di buka.
Hello World!
function myFunction[] { alert["Page is loaded"]; }Demikian pembahasan tentang Mengenal dan Cara Menggunakan EVENT pada JavaScript, jika ingin mengetahui keyword EVENT lainnya Anda bisa kunjungi link berikut ini LINK. Semoga tulisan ini bisa memberikan manfaat untuk Anda yang membaca. Sampai jumpa di tulisan berikutnya. Terima Kasih
Seri belajar javascript sudah masuk pada pembahasan ke-6 yang mana sebelumnya sudah saya bahas mengenai fungsi [method] di javascript. pembahasan kali ini cukup penting dan menarik mengenai event. apa itu event? dan bagaimana penggunannya di javascript? yuk! simak pembahasan 6 jenis event di javascript berikut ini:
Pengertian Event di Javascript
Event adalah sesuatu yang terjadi ketika ada aksi yang dilakukan oleh pengguna atau sistem pada halaman web. Contoh misalnya ketika browser selesai menampilkan halaman dokumen html maka event onload bisa digunakan. Atau saat user mengisi sebuah form atau mengklik button maka kita bisa membuat suatu reaksi dari tindakan user tersebut.
Manfaat penggunaan event adalah memberikan suatu bentuk interaksi yang baik dengan pengguna. Event bisa dimanfaatkan untuk validasi inputan pengguna. memberikan respon saat halaman selesai di load, dan masih banyak lagi.
Ada banyak jenis event yang bisa digunakan baik yang di definisikan untuk user ataupun sistem. Namun pada kesempatan kali ini saya hanya akan membagikan 6 jenis event di javascript yang biasanya sering digunakan yaitu:
| 1 | onload | Event terjadi ketika halaman html selesai di tampilkan |
| 2 | title | Event terjadi ketika suatu elemen HTML diklik |
| 3 | onchange | Event terjadi ketika nilai suatu elemen berubah |
| 4 | onmouseover | Event terjadi ketika pointer mouse menyentuh/memasuki suatu elemen HTML |
| 5 | onmouseout | Event terjadi ketika pointer mouse keluar dari suatu elemen HTML |
| 6 | onsubmit | Event terjadi ketika form di submit |
OnLoad
Event onload adalah event yang dapat di buat dalam document body. Event ini akan berjalan ketika semua isi dokumen telah ditampilkan di halaman browser.
Contoh:
function tampil[]{ document.getElementById["area"].innerHTML="Teks ini dari event onload" }Perhatikan kode di atas event onload menjadi atribut dalam tag dengan memanggil fungsi tampil yang akan menampilkan kalimat ‘Teks ini dari event onload’ .
OnClick
Event title terjadi saat pengguna mengklik suatu elemen dalam html. biasanya event ini digunakan untuk button, link, radio button, checkbox, tombol submit atau tombol reset.
Contoh:
//Membuat fungsi Hello[] function Hello[]{ return alert['Hello World!'] } Klik DiisniPerhatikan kode di atas event title menjadi atribut pada elemen button dengan memanggil fungsi Hello[] yang menampilkan tampilan pop up ‘Hello World!’.
OnChange
Event onchange akan berjalan ketika terjadi perubahan nilai pada suatu elemen. Biasanya digunakan untuk combobox [select list], text field dan text area.
//Membuat fungsi Hello[] function tampil[]{ var nama_jur = document.getElementById["jurusan"].value document.getElementById["tampil"].innerHTML="Jurusan : "+nama_jur } Teknik Informatika Sistem Informasi Teknik KomputerPerhatikan kode diatas, event onchange menjadi atribut dalam tag dengan memanggil fungsi tampil[].
Ketika ada perubahan nilai pada select list tersebut maka event ini akan berjalan, dimana melalui fungsi tampil[] akan mengambil nilai pada select list melalui id=’jurusan’. Kemudian nilai tersebut akan ditampilkan pada elemen dengan id=’tampil’.
onMouseover & OnMouseOut
Event onmouseover berjalan ketika pengguna menggerakan kursor mouse menyentuh elemen tertentu, baik berupa dokumen, link, form, image dan lainnya.
Sedangkan event onmouseout adalah kebalikannya yaitu event ini akan terjadi ketika kursor mouse bergerak keluar dari elemen suatu tertentu.
Contoh:
function tampil[]{ document.getElementById["area"].style.color='crimson' document.getElementById["area"].innerHTML='Anda menyentuh area terlarang' } function kembali[]{ document.getElementById["area"].style.color='black' document.getElementById["area"].innerHTML='Jangan arahkan mouse kalian disini' }Perhatikan kode di atas terdapat elemen Ketika cursor mouse masuk ke elemen tersebut maka event onmouseover akan terjadi dengan menjalankan fungsi tampil[] yang menampilkan kalimat ‘Anda menyentuh area terlarang’ dengan tulisan berwarna crimson [merah]. Sedangkan ketika cursor mouse pengguna keluar dari elemen tersebut maka event onmouseout akan terjadi. dengan memanggil fungsi kembali[] untuk menampilkan kalimat semula. Event onsubmit khusus diguanakn untuk tombol submit pada form. Ketika pengguna mengklik submit maka event ini akan berjalan. Perhatikan kode di atas, terdapat form dengan id=’form’ yang memiliki elemen text field dengan id=’nama’ dan select list dengan id=’jurusan’ serta tombol submit. Ketika form tersebut di submit maka event akan terjadi dengan memanggil fungsi tampil[]. Fungsi tampil[] akan mengambil nilai dari elemen nama dan jurusan berdasarkan id-nya masing-masing, lalu kemudian ditampilkan. Sekian pembahasan mengenai 6 jenis event di javascript, ada banyak jenis event yang bisa kalian pakai untuk membuat sebuah reaksi dari tindakan user di halaman web yang kalian buat. Silahkan beri komentar kalian di bawah postingan ini jika ada pertanyaan, terimakasih.OnSubmit
Contoh:
Nama :
Jurusan :
Teknik Informatika
Sistem Informasi
Teknik Komputer
function tampil[]{
var nama = document.getElementById["nama"].value;
var jurusan = document.getElementById["jurusan"].value;
document.write["Nama : "+nama+"
"]
document.write["jurusan : "+jurusan+"
"]
}
document.getElementById["form"].onsubmit=tampil
Kesimpulan
Video yang berhubungan
Chủ Đề