event
- event adalah kejadian yang terjadi di halaman web
misalnya
- user melakukan scroll
- user melakukan klick
- halaman web di load
- form di submit
- handle event
1. menggunakan atribut
<button onclick="hello()">klik me</button>
ada juga selain onclick: onchange, onmouseover, onkeyup, onload.
2. menggunakan method addeventListener()
button.addEventListener("click", function() {
// kode yang akan dijalankan disini
});
artinya button memilki event yang saat di click akan menjalankan fungsi
event click dan mouse
- event click
btnlogin.addEventListener("click", function () {}) // berfungsi saat elemem di click
btnlogin.addEventListener("dblclick", function () {}) // berfungsi saat elemem di click sebanyak dua kali
contoh:
document.getElementById("btn-one").addEventListener("click", function () {
alert("click satu kali");
});
document.getElementById("btn-double").addEventListener("dblclick", function () {
alert("click dua kali");
});
- event mouse
btn.addEventListener("mousedown", function (event) {}) // berfungsi saat tombol mouse ditekan
btn.addEventListener("mouseup", function (event) {}) // berfungsi saat tombol mouse dilepas
btn.addEventListener("mousemove", function (event) {}) // berfungsi saat mouse bergerak di atas elemen
btn.addEventListener("mouseenter", function () {}) // berfungsi saat tombol mouse ditekan
btn.addEventListener("mouseover", function () {}) // berfungsi saat mouse memasuki elemen
btn.addEventListener("mouseleave", function () {}) // berfungsi saat mouse meninggalkan elemen setelah memasukinya
btn.addEventListener("mouseout", function () {}) // berfungsi saat mouse meninggalkan elemen
contoh:
const btnEnter = document.getElementById("btn-enter");
const btnHover = document.getElementById("btn-hover");
const btnOut = document.getElementById("btn-out");
btnEnter.addEventListener("mouseenter", function (event) {
event.target.innerText = "mouse sudah masuk";
});
btnOut.addEventListener("mouseout", function (event) {
event.target.innerText = "mouse sudah keluar";
});
btnHover.addEventListener("mouseover", function (event) {
event.target.innerText = "mouse sudah di atas element";
});
fugsi event,target adalah untuk mengakses elemen html yang menjadi sumber event
event keyboard dan change
- event keyboard
document.addEventListener("keydown", function (event) {}) // berfungsi saat pengguna menekan tombol keyboard
document.addEventListener("keypress", function (event) {}) // berfungsi saat pengguna menekan dan melepaskan tombol keyboard
document.addEventListener("keyup", function (event) {}) // berfungsi saat pengguna melepaskan tombol keyboard
contoh:
const keydown = document.getElementById("keydown");
const pressed = document.getElementById("pressed");
const keyup = document.getElementById("keyup");
document.addEventListener("keydown", function (event) {
keydown.innerText = `menekan: ${event.key}`;
});
document.addEventListener("keypress", function (event) {
pressed.innerText = `menahan: ${event.key}`;
});
document.addEventListener("keyup", function (event) {
keyup.innerText = `melepas: ${event.key}`;
});
- event change
buah.addEventListener("change", function (e) {}) // berfungsi untuk menangani perubahan yang terjadi dan meresponsenya
contoh:
const buah = document.getElementById("buah");
const info = document.getElementById("info");
buah.addEventListener("change", function (e) {
info.innerText = `anda memilih: ${e.target.value}`;
});