1<button onclick="alert('Bosildi!')">Bos</button>

1const btn = document.getElementById("b");
2btn.onclick = function() {
3  console.log("Bosildi");
4};
5// Kamchilik: 1 ta listener — yangi berilsa eskisi o'chadi

1const btn = document.getElementById("b");
2
3btn.addEventListener("click", () => {
4  console.log("Bosildi");
5});
6
7// Bir nechta listener biriktirish mumkin!
8btn.addEventListener("click", () => {
9  console.log("Ikkinchi javob");
10});

1// element.addEventListener(event, handler, options)
2
3const btn = document.querySelector("#tugma");
4
5function hndl() {
6  console.log("Bosildi");
7}
8
9btn.addEventListener("click", hndl);
10
11// Olib tashlash — aniq funksiyani ko'rsatish kerak
12btn.removeEventListener("click", hndl);
13
14// Bir marta ishlaydigan
15btn.addEventListener("click", () => {
16  console.log("Faqat bir marta");
17}, { once: true });

1const box = document.querySelector(".quti");
2
3box.addEventListener("click", () => {
4  box.style.background = "lightblue";
5});
6
7// Ikki marta bosish (tez)
8box.addEventListener("dblclick", () => {
9  box.style.background = "salmon";
10  box.innerText = "Dblclick!";
11});
12
13// contextmenu — o'ng bosish
14box.addEventListener("contextmenu", (e) => {
15  e.preventDefault();
16  console.log("O'ng bosildi");
17});
18
19// mouseenter / mouseleave
20box.addEventListener("mouseenter", () => box.classList.add("hover"));
21box.addEventListener("mouseleave", () => box.classList.remove("hover"));

1// Sahifa va barcha resurslar yuklanganda
2window.addEventListener("load", () => {
3  console.log("Hamma narsa tayyor");
4});
5
6// DOM tayyor bo'lganda (rasm/CSS kutilmaydi)
7document.addEventListener("DOMContentLoaded", () => {
8  console.log("DOM tayyor");
9});
10
11// Oyna o'lchami o'zgarganda
12window.addEventListener("resize", () => {
13  console.log("Kenglik:", window.innerWidth);
14  console.log("Balandlik:", window.innerHeight);
15});
16
17// Scroll
18window.addEventListener("scroll", () => {
19  console.log("Scroll:", window.scrollY);
20});

1button.addEventListener("click", (e) => {
2  console.log(e.target);        // qaysi element bosildi
3  console.log(e.type);          // "click"
4  console.log(e.clientX, e.clientY); // koordinatalar
5});
6
7// Forma submit'ini bloklash
8forma.addEventListener("submit", (e) => {
9  e.preventDefault();
10  console.log("Ma'lumot yuborildi");
11});
12
13// Klaviatura
14document.addEventListener("keydown", (e) => {
15  console.log(e.key);           // "Enter", "a", "ArrowUp"
16  if (e.key === "Escape") closeModal();
17});