Events
Melalui kelas ini, kamu diajak untuk:
- Membuat interaksi web dengan events
Events
Events, seperti terjemahan dari Bahasa Inggris ke Bahasa Indonesia, adalah "kejadian". Maksud "kejadian" dalam laman website adalah setiap interaksi yang dilakukan user. Mulai dari yang sederhana seperti menggerakkan mouse, hingga pop-up interaktif ketika melakukan tindakan tertentu.
Mengatur Event
Ada beberapa cara untuk memberi perintah kepada komputer events apa yang dilakukan oleh user. Ketuk kotak penjelasan di bawah
Event Handler
Digunakan untuk memberi perubahan pada event sebelumnya.
- Inline HTML Atribute: menambahkan atribut di dalam HTML.
- Element Method: Menggunakan method untuk elemen yang diseleksi.
addEventListener()
Sebuah metode khusus untuk menambahkan event.
Event Handler
Metode yang paling primitif dalam event handler adalah menambahkan JavaScript di dalam file. Misalnya kita ingin menambahkan efek ketika user mengklik satu bagian tertentu, maka class yang menjadi bagian tersebut harus disandingkan dengan fungsi JavaScript.
Sebagai contoh susunan kode di bawah ini. Kita ingin menambahkan efek saat klik di class text2. Caranya dengan memberi onclick beserta fungsi yang nantinya akan diatur dalam JavaScript:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie-edge">
<title>Document</title>
</head>
<style>
body {
margin: 20px auto;
}
.p {
font-size: 30px;
}
.error {
width: 70%;
}
.container {
width: 90%;
background-color: lightblue;
}
</style>
<body>
<h1 id="judul">DOM</h1>
<section>
<div class="container2">
<h1>Hello, World</h1>
<p class="teks1">Kode Teks 1</p>
<p class="teks2">Kode Teks 2</p>
<p class="teks3" onclick="warnaKolom">Kode Teks 3</p>
</div>
</section>
<section>
<div class="container2">
<p>Hello World</p>
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ul>
</div>
</section>
<script type="dom.js"></script>
</body>
</html>Di bagian JavaScript, kita perlu mengatur function backgroundColor dengan cara berikut.
const teks2 = document.querySelector('.teks2')
function warnaKolom() {
teks2.style.backgroundColor = 'green';
}Hasilnya, ketika user mengklik bagian teks2, maka warnanya akan berubah menjadi hijau.
Cara berikutnya adalah dengan menggunakan addEventListener. Function onclick di bagian HTML perlu dihapus karena tidak lagi berlaku.
const teks2 = document.querySelector('.teks2')
teks2.addEventListener('click', function(){
}) Maksud dari kode di atas adalah meminta JavaScript menarget elemen class teks2 kemudian tambahkan event (dalam hal ini click) untuk memberi suatu efek.