HTML DOM memungkinkan JavaScript untuk bereaksi terhadap event HTML.
Section Artikel
Bereaksi terhadap Event
JavaScript dapat dieksekusi ketika suatu event terjadi, seperti ketika pengguna mengklik elemen HTML.
Untuk mengeksekusi kode ketika pengguna mengklik sebuah elemen, tambahkan kode JavaScript ke atribut event HTML:
onclick = JavaScript
Contoh event pada HTML:
- Saat pengguna mengklik mouse
- Saat halaman web telah dimuat
- Saat gambar telah dimuat
- Saat mouse bergerak di atas sebuah elemen
- Saat kolom input diubah
- Saat formulir HTML dikirimkan
- Saat pengguna menekan tombol
Dalam contoh ini, konten elemen diubah ketika pengguna mengkliknya:
<!DOCTYPE html> <html> <body> <h1 onclick="this.innerHTML='Ooops!'">Klik pada teks ini!</h1> </body> </html>
Dalam contoh ini, sebuah fungsi dipanggil dari event handler.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">Klik pada teks ini!</h1>
<script>
function changeText(id) {
id.innerHTML = "Ooops!";
}
</script>
</body>
</html>
Atribut Event HTML
Untuk menetapkan event ke elemen HTML kita dapat menggunakan atribut event.
Contoh
Tetapkan event onclick ke elemen tombol.
<!DOCTYPE html>
<html>
<body>
<p> Klik tombol untuk menampilkan tanggal. </p>
<button onclick="displayDate()">Tanggal Sekarang</button>
<script>
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
<p id="demo"></p>
</body>
</html>
Dalam contoh di atas, fungsi bernama displayDate akan dijalankan saat tombol diklik.
Tetapkan Event Menggunakan DOM HTML
HTML DOM memungkinkan untuk menetapkan event ke elemen HTML menggunakan JavaScript.
Contoh:
Tetapkan event onclick ke elemen tombol.
<!DOCTYPE html>
<html>
<body>
<p> Klik "Coba" untuk menjalankan fungsi displayDate (). </p>
<button id="myBtn">Coba</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").onclick = displayDate;
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
</body>
</html>
Dalam contoh di atas, fungsi bernama displayDate ditetapkan ke elemen HTML dengan id = “myBtn”.
Fungsi tersebut akan dijalankan ketika tombol diklik.
Event onload dan onunload
Event onload dan onunload dipicu saat pengguna masuk atau keluar dari halaman.
Event onload dapat digunakan untuk memeriksa jenis browser pengunjung dan versi browser, dan memuat versi yang tepat dari halaman web berdasarkan informasi tersebut.
Event onload dan onunload dapat digunakan untuk menangani cookie.
Contoh:
<!DOCTYPE html>
<html>
<body onload="checkCookies()">
<p id="demo"></p>
<script>
function checkCookies() {
var text = "";
if (navigator.cookieEnabled == true) {
text = "Cookies are enabled.";
} else {
text = "Cookies are not enabled.";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
Event onchange
Event onchange sering digunakan dalam kombinasi dengan validasi kolom input.
Di bawah ini adalah contoh cara menggunakan onchange. Fungsi upperCase() akan dipanggil saat pengguna mengubah konten kolom input.
Contoh:
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>
</head>
<body>
Masukan nama anda: <input type="text" id="fname" onchange="myFunction()">
<p> Saat Anda meninggalkan kolom input, sebuah fungsi dipicu dan akan mengubah teks masukan menjadi huruf besar. </p>
</body>
</html>
Event onmouseover dan onmouseout
Event onmouseover dan onmouseout dapat digunakan untuk memicu suatu fungsi saat pengguna mengarahkan mouse ke atas, atau keluar dari, elemen HTML.
Contoh:
<!DOCTYPE html> <html> <body> <div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;"> Mouse Over Me</div> <script> function mOver(obj) { obj.innerHTML = "Terimkasih" } function mOut(obj) { obj.innerHTML = "Arahkan mouse kesini" } </script> </body> </html>
Event onmousedown, onmouseup, dan onclick
Event onmousedown, onmouseup, dan onclick semuanya adalah bagian dari klik mouse. Pertama saat tombol mouse diklik, peristiwa onmousedown dipicu, kemudian, saat tombol mouse dilepaskan, peristiwa onmouseup dipicu, terakhir, saat klik mouse selesai, peristiwa onclick dipicu.
Contoh:
<!DOCTYPE html>
<html>
<body>
<div onmousedown="mDown(this)" onmouseup="mUp(this)"
style="background-color:#D94A38;width:90px;height:20px;padding:40px;">
Click Me</div>
<script>
function mDown(obj) {
obj.style.backgroundColor = "#1ec5e5";
obj.innerHTML = "Release Me";
}
function mUp(obj) {
obj.style.backgroundColor="#D94A38";
obj.innerHTML="Thank You";
}
</script>
</body>
</html>
