Cara menggunakan ONEVENT pada JavaScript

Question

Event adalah sesuatu aksi yang dilakukan pada HTML elemen. Kita dapat mendeteksi event pada dokumen HTML dengan menggunakan JavaScript.

Table of Contents Show

Contoh Event
Apa itu event di JS?
Apa yang dimaksud dengan event OnClick?
2 Apakah nama event yang terjadi ketika user mengklik suatu element HTML?
Apa itu onload?

Tutorial sebelumnya : JavaScript Object

Event HTML

Event bisa merupakan sesuatu aksi yang dilakukan oleh web browser atau aksi yang dilakukan oleh pengguna. Berikut beberapa contoh aksi pada dokumen HTML :

Pengguna menekan tombol
Pengguna mengubah isi elemen input
Web browser selesai menampilkan dokumen HTML

Aksi pada dokumen HTML akan mengeluarkan object event. JavaScript bisa digunakan untuk menangkap object event.

JavaScript mempunyai atribut event pada beberapa elemen HTML. Atribut event berisi perintah JavaScript (coding JavaScript). Perintah JavaScript ini akan dieksekusi apabil suatu event dikeluarkan.

Atribut event dapat menggunakan single quote.

<element event='some JavaScript'>

Atribut event juga dapat menggunakan double quote.

<element event="some JavaScript">

Contoh di bawah ini memperlihatkan atribut event onclick ditambahkan kepada elemen Button (tombol). Nilai atribut ini adalah coding JavaScript. Event onclick akan dilempar apabila tombol diklik. Event onclick ini ditangkap di dalam coding JavaScript. Pada coding JavaScript kita bisa melakukan suatu aksi. Aksi pada contoh adalah mengubah konten elemen HTML dengan id demo.

<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>

Pada contoh di bawah ini kita mengubah konten (caption) tombol pada saat event onclick ditangkap.

<button onclick="this.innerHTML = Date()">The time is?</button>

Nilai atribut event juga bisa berupa fungsi. Fungsi ini akan dipanggil apabila suatu event ditangkap. Pada contoh di bawah diperlihatkan fungsi displayDate dipanggil pada waktu tombol diklik.

<button onclick="displayDate()">The time is?</button>

Bahan Belajar JavaScript Event

Contoh Event

Berikut ini beberapa contoh event yang banyak digunakan. Nama atribut event sama dengan nama event.

Tutorial JavaScript Event Lain

onchange, event ini dilempar apabila nilai elemen input diganti
onclick, event ini dilempar apabila elemen HTML diklik
onmouseover, event ini dilempar apabila pointer mouse berada diatas suatu elemen HTML
onmouseout, event ini dilempar apabila pointer mouse keluar dari elemen HTML
onkeydown, event ini dilempar apabila keyboard ditekan pada elemen HTML
onload, event ini dilempar apabila web browser selesai menampilkan semua element HTML pada suatu dokumen HTML

Tutorial selanjutnya : JavaScript Text Atau String
Daftar Tutorial : Tutorial Belajar JavaScript

Hallo teman-teman, berjumpa kembali dengan saya Muhamad Rizal Hidayat (Murihat). Masih seperti biasa diwebsite dumetschool ini banyak sekali artikel yang bermanfaat dalam memberikan tutorial atau tips dan trik seputar website dan semoga teman-teman dapat dengan mudah dan semangat dalam mempelajari ilmu seputar website.

Pada kesempatan kali ini saya akan membahas tentang Cara Menggunakan Event Onload pada Javascript. Event pada JavaScript dapat dikatakan sebagai fungsi pasif (passive function) yang disediakan oleh JavaScript. Proses event akan berjalan apabila suatu aksi tertentu dikenakan pada elemen HTML tertentu. Dan untuk Event Onload ini akan di eksekusi jika suatu object telah di load, contohnya jika halaman website kita sudah di load maka akan di eksekusi kode event javascriptnya.

Agar lebih memahami event onload javascript ini mari kita coba praktekan, pertama-tama jalankan/run text-editor yang teman-teman gunakan. Kemudian ketiklah/copy script javascript dibawah ini :

<html>
<head>
	<meta charset="UTF-8">
	<title>onload Javascript</title>
</head>
<body onload="alert('LOADING SELESAI')">
	<h2>SELAMAT DATANG!!</h2>
</body>
</html>

Jika sudah simpan dengan format .html dan untuk penjelasan dari script diatas adalah jika sebuah halaman website sudah terload semua maka akan di eksekusi kode javascriptnya. Contoh hasil dari kode diatas seperti dibawah ini :

Setelah diload

setelah klik oke

Cukup mudah ya teman-teman tentang event onload pada javascript ini ? jadi seperti itulah contoh sederhananya dari Cara Menggunakan Event Onload pada Javascript. untuk pengembangan kedepannya silahkan teman-teman coba berkreasi sendiri sesuai keinginan teman-teman.

Oke sekian pembahasan kali ini tentang Cara Menggunakan Event Onload pada Javascript. semoga dapat bermanfaat dan sampai bertemu dipembahasan selanjutnya.

Terimakasih

Apa itu event di JS?

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

Apa yang dimaksud dengan event OnClick?

OnClick. OnClick adalah suatu kerjadian yang terjadi ketika sebuah elemen html di klik.

2 Apakah nama event yang terjadi ketika user mengklik suatu element HTML?

onclick = adalah event jika sebuah element html di klik.

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 javascript Apa itu onload? addEventListener JavaScript DOMContentLoaded Belajar JavaScript Belajar Javascript PDF