Event apa yang terjadi ketika pengguna mengklik pada sebuah elemen html?

Question

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:

Table of Contents Show

Pengertian Event di Javascript
onMouseover & OnMouseOut
Event apa yang muncul ketika user mengklik sebuah elemen html?
Apa fungsi dari event OnClick?
Jelaskan apa itu Event pada JavaScript?
Apa itu onload?

Pengertian Event di Javascript
OnLoad
OnClick
OnChange
onMouseover & OnMouseOut
OnSubmit
Kesimpulan

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	onclick	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:

<!DOCTYPE html>
<html>
    <head>
        <script>
            function tampil(){
              document.getElementById("area").innerHTML="Teks ini dari event onload"
            }
        </script>
    </head>
    <body  onload="tampil()">
        <div id="area"></div>
    </body>
</html>

Perhatikan kode di atas event onload menjadi atribut dalam tag <body> dengan memanggil fungsi tampil yang akan menampilkan kalimat ‘Teks ini dari event onload’ .

OnClick

Event onclick terjadi saat pengguna mengklik suatu elemen dalam html. biasanya event ini digunakan untuk button, link, radio button, checkbox, tombol submit atau tombol reset.

Contoh:

<!DOCTYPE html>
<html>
    <head>
        <script>
            //Membuat fungsi Hello()
            function Hello(){
                return alert('Hello World!')
            }
        </script>
    </head>
    <body>
       <button onclick="Hello()">Klik Diisni</button>
    </body>
</html>

Perhatikan kode di atas event onclick 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.

<!DOCTYPE html>
<html>
    <head>
        <script>
            //Membuat fungsi Hello()
            function tampil(){
                var nama_jur = document.getElementById("jurusan").value
                document.getElementById("tampil").innerHTML="Jurusan : "+nama_jur
            }
        </script>
    </head>
    <body>
        <select id="jurusan" OnChange="tampil()">
            <option value="Teknik Informatika">Teknik Informatika</option>
            <option value="Sistem Informasi">Sistem Informasi</option>
            <option value="Teknik Komputer">Teknik Komputer</option>
        </select>
        <br><br>
        <div id='tampil'></div>
    </body>
</html>

Perhatikan kode diatas, event onchange menjadi atribut dalam tag <select> 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:

<!DOCTYPE html>
<html>
    <head>
        <script>
            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'
            }

        </script>
    </head>
    <body>
        <div id="area" onmouseover="tampil()" onmouseout="kembali()" style="background-color:white;">Jangan arahkan mouse kalian disini</div>
        <br>
 
    </body>
</html>

Perhatikan kode di atas terdapat elemen <div> dengan id=’area’ yang memiliki atribut onmouseover yang memanggil fungsi tampil() dan onmouseout yang memanggil fungsi kembali().

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.

OnSubmit

Event onsubmit khusus diguanakn untuk tombol submit pada form. Ketika pengguna mengklik submit maka event ini akan berjalan.

Contoh:

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <form id="form">
            Nama : <input type="text" id="nama"/><br><br>
            Jurusan : <select id="jurusan">
                <option value="Teknik Informatika">Teknik Informatika</option>
                <option value="Sistem Informasi">Sistem Informasi</option>
                <option value="Teknik Komputer">Teknik Komputer</option>
            </select>
            <br><br>
            <input type="submit" value="Kirim"/>
        </form>
        <br>
        <script>
            function tampil(){
                var nama = document.getElementById("nama").value;
                var jurusan = document.getElementById("jurusan").value;
            
                document.write("Nama          : "+nama+"<br>")
                document.write("jurusan       : "+jurusan+"<br>")
         
            }
            document.getElementById("form").onsubmit=tampil
        
    </script>
    </body>
</html>

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.

Kesimpulan

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.

Event apa yang muncul ketika user mengklik sebuah elemen html?

onclick = adalah event jika sebuah element html di klik. onchange = adalah event jika sebuah element html berubah.

Apa fungsi dari event OnClick?

Fungsi Onclick event ini adalah memungkinkan Anda menjalankan kode saat pengguna mengklik tombol atau elemen lain di halaman web Anda. Onclick adalah jenis event JavaScript. Peristiwa adalah tindakan yang terjadi di browser yang dapat dimulai oleh pengguna atau browser itu sendiri.

Jelaskan apa itu Event pada JavaScript?

Pada Javascript: Event adalah kejadian yang terjadi di halaman web. Kejadian yang dimaksud di sini seperti aktivitas yang dikerjakan pada halaman web.

Apa itu onload?

Event onload adalah event ketika suatu objek selesai dimuat (di-load) dan menampilkan seluruh eelemen HTML pada browser. Event ini dapat terjadi pada objek window, image, dan layer.

kode html Apa itu onload? Event handler JavaScript Jenis event handler On click adalah