Cara menggunakan LISTENERS pada JavaScript

Hai teman-teman semuanya, apa kabar? semoga tetap dalam keadaaan sehat, kita lanjut lagi pembelajarannya kali ini kita akan belajar membuat event pada javascript dengan addEventListener.

addEventListener adalah method yang sangat penting yang digunakan untuk membuat event seperti klik,dbclick,hover,blur,focus dan lainnya untuk keperluan manipulasi didalam DOM javascript, meskipun sebenarnya banyak cara untuk menjalankan event dengan javascript tapi kali ini kita akan belajar dengan menggunakan method addEventListener pada javascript.

untuk lebih jelasnya kita langsung saja praktekan, kali ini silahakan teman-teman buat sebuah file dan ketikan script seperti berikut ini:

Saya membuat sebuah tombol yang nanti kita akan berikan method addEventListener, idenya ketika tombol diklik maka kita akan menampilkan pesan alert selamat pagi juara, kalau kita menuliskan pemberian event seperti biasa maka script yang kita tuliis akan seperti berikut ini:

Jika kita menggunakan method addEventListener maka penulisan scriptnya seperti berikut ini:

Maka jika kita jalankan pada berowser maka ketika tombil di klik akan menampilkan pesan alert, kembali lagi untuk penggunakan teman-teman bebas menggunakannya, kedua cara diatas tidaklah salah, kalian bisa menggunakan salah satu dari cara tadi untuk memanipulasi element dengan DOM javascript.

Oke teman-teman untuk tutorial kali ini tentang membuat event pada javascript dengan addEventListener saya rasa ckup sampai disini dulu, sampai bertemu lagi pada tutorial berikutnya, selamat belajar.

Terima kasih

Hai teman-teman semuanya, apa kabar? semoga tetap dalam keadaaan sehat, kita lanjut lagi pembelajarannya kali ini kita akan belajar membuat event pada javascript dengan addEventListener.

Table of Contents

• Tutorial JavaScript Pemula Part 5 : Belajar Dan Cara Penggunaan Event Dalam JavaScript
• Belajar Dan Cara Penggunaan Event Dalam JavaScript
• Pengertian Event
• Jenis – Jenis Event Pada Javascript
• Cara Penggunaan Event

addEventListener adalah method yang sangat penting yang digunakan untuk membuat event seperti klik,dbclick,hover,blur,focus dan lainnya untuk keperluan manipulasi didalam DOM javascript, meskipun sebenarnya banyak cara untuk menjalankan event dengan javascript tapi kali ini kita akan belajar dengan menggunakan method addEventListener pada javascript.

untuk lebih jelasnya kita langsung saja praktekan, kali ini silahakan teman-teman buat sebuah file dan ketikan script seperti berikut ini:

Saya membuat sebuah tombol yang nanti kita akan berikan method addEventListener, idenya ketika tombol diklik maka kita akan menampilkan pesan alert selamat pagi juara, kalau kita menuliskan pemberian event seperti biasa maka script yang kita tuliis akan seperti berikut ini:

Jika kita menggunakan method addEventListener maka penulisan scriptnya seperti berikut ini:

Maka jika kita jalankan pada berowser maka ketika tombil di klik akan menampilkan pesan alert, kembali lagi untuk penggunakan teman-teman bebas menggunakannya, kedua cara diatas tidaklah salah, kalian bisa menggunakan salah satu dari cara tadi untuk memanipulasi element dengan DOM javascript.

Oke teman-teman untuk tutorial kali ini tentang membuat event pada javascript dengan addEventListener saya rasa ckup sampai disini dulu, sampai bertemu lagi pada tutorial berikutnya, selamat belajar.

Terima kasih

Tutorial JavaScript Pemula Part 5 : Belajar Dan Cara Penggunaan Event Dalam JavaScript

Tutorial JavaScript Pemula Part 5 : Belajar Dan Cara Penggunaan Event Dalam JavaScript - Hello everyone selamat datang kembali diwebsite saya belajarwithib.my.id, pada seri kali ini kita akan memasuki Seri baru yaitu Belajar Dan Cara Penggunaan Event Dalam JavaScript.

Sebelum kamu baca artikel ini ada baiknya kamu membaca artikel yang sebelumnya terlebih dahulu yang berjudul Memahami Function PadaJavaScript agar nantinya kamu jauh lebih mengerti dengan apa itu javascript dan dasar-dasar javascript.

Belajar Dan Cara Penggunaan Event Dalam JavaScript

Pengertian Event

Apa sih sebenarnya event ini? Mungkin pertanyaan itu akan hadir didalam kepala kamu apalagi kamu baru belajar javascript. Event itu merupakan suatu perlakuan yang dilakukan terhadap suatu elemen HTML.  Sebagai contoh kamu mempunyai sebuah button “show” pada aplikasi, dan saat button tersebut di klik akan menampilkan sebuah alert/notifikasi. Untuk menerapkan itu, Kamu harus memasukan atribut EVENT onclick pada elemen button tersebut dan mengisinya dengan sebuah function atau kode JavaScript inline yang berisi kejadian yang Kamu inginkan.

• Mending Rakit PC Atau Beli Laptop
• Tips Jitu Belajar Coding Secara Otodidak

Jenis – Jenis Event Pada Javascript

Ada beberapa jenis event pada javascript yang sering digunakan oleh banyak orang, yaitu sebagai berikut:

• Onblur adalah ketika suatu elemen tidak focus
• Onchange adalah ketika nilai suatu elemen diubah
• Onclick adalah ketika suatu elemen diklik
• Ondblclick adalah ketika suatu elemen didobelklik
• Onerror  adalah ketika error
• Onfocus adalah ketika suatu elemen sedang fokus
• Onkeydown adalah ketika tombol huruf pada keyboard ditekan
• Onkeypress adalah ketika tombol keyboard ditekan
• Onkeyup adalah ketika tombol keyboard di lepas
• Onload adalah ketika dokumen di-load
• Onmousedown adalah ketika tombol mouse ditekan
• Onmousemove adalah ketika mouse digerakkan
• Onmouseout adalah ketika mouse keluar dari area suatu elemen
• Onmouseover adalah ketika mouse melewati area suatu elemen
• Onmouseup adalah ketika tombol mouse dilepas setelah diklik
• Onreset adalah ketika form direset
• Onresize adalah ketika elemen diubah ukuranya
• Onselect adalah ketika suatu elemen dipilih
• Onsubmit adalah ketika data form dikirim
• Onunload ketika keluar dari suatu dokumen

Itulah beberapa event yang saya ketahui jika ada tambahan silahkan coment di coloum comentar ya biar saya tambah atau koreksi jika terdapat kata-kata yang salah.

Cara Penggunaan Event

Disini saya akan mencontohkan salah satu cara penggunaan event pada javascript maka dari itu silahkan perhatikanlah code dibawah ini dan jangan lupa untuk kamu praktekan nya ya :

<!DOCTYPE html>
<html>
<head>
	<title>Belajar Javascript</title>
</head>
<body>
	<button onclick="pesan()">Klik Disini</button>
	<div id="muncul"></div>
</body>
<script type="text/javascript">
	function pesan(){
		document.getElementById("muncul").innerHTML = "<p>Berhasil ditekan</p>";
	}
</script>
</html>

Hasilnya akan seperti dibawah ini :

Pada  code diatas terdapat event onclick="pesan()" pada button yang didalamnya terdapat function pesan() yang jika kalau diklik maka akan menjalankan functionnya.

• Tutorial JavaScript Pemula Part 4 : Memahami Function Pada JavaScript
• Tutorial JavaScript Pemula Part 3 : Belajar Perulangan Pada JavaScript

function pesan(){
	document.getElementById("muncul").innerHTML = "<p>Berhasil ditekan</p>";
}

Dan pada code diatas kita membuat function pesan() yang nantinya hasilnya akan ditampilkan pada elemet html yang berID muncul.

Penutupan

Begitulah sedikit penjelasan mengenai event pada javascript untuk selebihnya kamu bereksplorasi sendiri karena akan cepat mengerti jika kamu mencoba dan memprakteknnya, sebelum itu silahkan baca artikel yang berjudul Memahami Function Pada JavaScript karena selebihnya kita akan mengunakan function untuk praktek nantinya.

Semoga Bermanfaat!!