15 Kunci Jawaban Event

Kunci jawaban 15 Latihan Event.

15.1 Balon

let balon = document.querySelector("p");
let ukuran = 20;
 
function atur(e) {
  if (e.key == "ArrowUp") {
    e.preventDefault();
    ukuran *= 1.1;
  } else if (e.key == "ArrowDown") {
    e.preventDefault();
    ukuran *= 0.9;
  }
  if (ukuran > 60) {
    balon.textContent = "💥";
    window.removeEventListener("keydown", atur);
  } else {
    balon.style.fontSize = ukuran + "px";
  }
}
window.addEventListener("keydown", atur);

Kenapa: handler atur disimpan di binding supaya bisa dilepas nanti dengan removeEventListener (fungsi anonim gak bisa dilepas). preventDefault menghentikan aksi default panah (menggulung halaman). Waktu melewati batas, teks diganti 💥 dan listener dilepas sehingga tombol gak berpengaruh lagi.

→ Soal: 15 Latihan Event > 15.1 Balon

15.2 Jejak Mouse

let titik = [];
for (let i = 0; i < 8; i++) {
  let d = document.createElement("div");
  d.style.cssText =
    "position:absolute;width:8px;height:8px;background:blue;";
  document.body.appendChild(d);
  titik.push(d);
}
 
let ke = 0;
window.addEventListener("mousemove", e => {
  let d = titik[ke];
  d.style.left = (e.pageX - 4) + "px";
  d.style.top = (e.pageY - 4) + "px";
  ke = (ke + 1) % titik.length;
});

Kenapa: delapan <div> dibuat sekali. Tiap gerakan mouse, kita pindahkan satu titik (bergiliran lewat ke yang dimodulo jumlah titik) ke posisi mouse. Karena giliran, kedelapan titik menandai delapan posisi mouse terakhir, membentuk ekor. - 4 memusatkan titik pada kursor.

→ Soal: 15 Latihan Event > 15.2 Jejak Mouse

15.3 Piksel yang Bisa Diwarnai

let grid = document.createElement("div");
grid.style.cssText = "display:grid;grid-template-columns:repeat(10,20px);";
for (let i = 0; i < 100; i++) {
  let sel = document.createElement("div");
  sel.style.cssText = "width:20px;height:20px;border:1px solid #ccc;";
  grid.appendChild(sel);
}
document.body.appendChild(grid);
 
let menekan = false;
function warnai(target) {
  if (target.parentNode == grid) target.style.background = "black";
}
grid.addEventListener("mousedown", e => {
  e.preventDefault();
  menekan = true;
  warnai(e.target);
});
grid.addEventListener("mousemove", e => {
  if (menekan) warnai(e.target);
});
window.addEventListener("mouseup", () => menekan = false);

Kenapa: satu handler "mousedown" dan satu "mousemove" di grid (bukan tiap sel) — inilah event delegation: e.target memberi tahu sel mana yang disentuh. Flag menekan dinyalakan saat tombol ditekan dan dimatikan di "mouseup" (dipasang di window supaya tetap tertangkap walau kursor keluar grid), jadi menyeret sambil menekan ikut mewarnai. preventDefault mencegah seleksi teks saat menyeret.

→ Soal: 15 Latihan Event > 15.3 Piksel yang Bisa Diwarnai