Chapter 33 — Events & Event Listeners

Bu bobda foydalanuvchi harakatlariga (bosish, yozish, sichqoncha harakati va h.k.) JavaScript qanday "javob berishini" o'rganamiz.

---

33.1 Event nima?

Simple Explanation

Event (hodisa) — sahifada yuz beradigan har qanday "voqea": tugma bosilishi, sahifa yuklanishi, klaviaturada tugma bosilishi va h.k.

Real-Life Analogy

🔔 Event'larni eshik qo'ng'irog'iga o'xshating: kimdir qo'ng'iroqni bossa (event yuz beradi), siz (JavaScript) buni "eshitib" (listen qilib), tegishli harakatni (function chaqirish) bajarasiz.

33.2 addEventListener()

Simple Explanation

addEventListener(eventType, callback) — elementga "tinglovchi" (listener) qo'shadi, ma'lum hodisa yuz berganda berilgan function ishga tushadi.

Example

index.html
HTMLNusxalash
01<button id="myButton">Bosing</button>

script.js
JavaScriptNusxalash
01let button = document.getElementById("myButton");
02 
03button.addEventListener("click", function () {
04    console.log("Tugma bosildi!");
05});

Keng tarqalgan hodisa turlari

33.3 Event Object

Simple Explanation

Har bir event handler (callback) — avtomatik ravishda event objectni argument sifatida oladi, u hodisa haqida batafsil ma'lumotga ega.

Example

script.js
JavaScriptNusxalash
01button.addEventListener("click", function (event) {
02    console.log(event.type);        // "click"
03    console.log(event.target);      // hodisa yuz bergan element
04    console.log(event.clientX);     // sichqoncha X koordinatasi
05});

Amaliy misol — input qiymatini olish

script.js
JavaScriptNusxalash
01let input = document.getElementById("myInput");
02 
03input.addEventListener("input", function (event) {
04    console.log("Yozilgan matn: " + event.target.value);
05});

💡 Key Idea
event.target — hodisa aynan qaysi elementda yuz berganini ko'rsatadi. Bu, ayniqsa, bir nechta o'xshash elementlarga bitta umumiy handler yozilganda juda foydali (Chapter 34'da chuqurroq ko'ramiz).

33.4 preventDefault() — Standart xatti-harakatni to'xtatish

Simple Explanation

Ba'zi HTML elementlari o'zining "standart" xatti-harakatiga ega (masalan, forma yuborilganda sahifa qayta yuklanadi, link bosilganda boshqa sahifaga o'tiladi). preventDefault() — bu standart xatti-harakatni to'xtatadi.

Example

index.html
HTMLNusxalash
01<form id="myForm">
02    <input type="text" id="username">
03    <button type="submit">Yuborish</button>
04</form>

script.js
JavaScriptNusxalash
01let form = document.getElementById("myForm");
02 
03form.addEventListener("submit", function (event) {
04    event.preventDefault(); // sahifa qayta yuklanishini to'xtatadi
05 
06    let username = document.getElementById("username").value;
07    console.log("Forma ma'lumoti: " + username);
08});

Explanation

preventDefault()siz, forma yuborilganda brauzer avtomatik ravishda sahifani qayta yuklaydi (yoki boshqa sahifaga o'tadi), bu esa JavaScript orqali ma'lumotni qayta ishlash imkoniyatini yo'qqa chiqaradi.

⚠️ Common Mistake
preventDefault()ni unutish — formalar bilan ishlashda eng ko'p uchraydigan xatolardan biri, chunki sahifa "kutilmaganda" qayta yuklanib, JavaScript orqali qilingan barcha ishlar yo'qoladi.

33.5 ⚠️ Qiyin mavzu: Event Listener ichida this va Arrow Function

Simple Explanation

Bu — Chapter 13'da o'rgangan this mavzusining event handler'lardagi qo'llanilishi, va u yerda o'rgangan qoidalar bu yerda ham amal qiladi, lekin bitta muhim nyuans bilan.

Oddiy function bilan — this elementga ishora qiladi

script.js
JavaScriptNusxalash
01button.addEventListener("click", function () {
02    console.log(this); // <button> elementning o'zi
03    this.style.color = "red"; // bosilgan tugmani qizil qiladi
04});

Explanation
Oddiy (regular) function addEventListenerga berilganda, this — hodisa yuz bergan elementning o'ziga ishora qiladi. Bu — maxsus qoida, addEventListener buni avtomatik ta'minlaydi.

Arrow Function bilan — this boshqacha ishlaydi

script.js
JavaScriptNusxalash
01button.addEventListener("click", () => {
02    console.log(this); // ❌ button emas, tashqi scope'ning this'i (Chapter 13, Holat 4)
03});

Explanation
Chapter 13'da o'rganganimizdek, arrow function o'zining thisiga ega emas — u tashqi scope'dan meros oladi. Shuning uchun event listener ichida arrow function ishlatilsa, this — bosilgan elementga emas, balki arrow function yozilgan joydagi tashqi thisga ishora qiladi.

🔗 Connection
Bu — Chapter 13.2 (Holat 4)da o'rgangan bilimning to'g'ridan-to'g'ri amaliy natijasi: agar sizga this orqali elementga murojaat qilish kerak bo'lsa, oddiy function ishlating; agar sizga tashqi (masalan, class instance) thisni saqlab qolish kerak bo'lsa, arrow function ishlating.

Amaliy misol — class ichida event listener

script.js
JavaScriptNusxalash
01class Counter {
02    constructor() {
03        this.count = 0;
04        this.button = document.getElementById("incrementBtn");
05 
06        // Arrow function — class'ning this'ini saqlab qoladi
07        this.button.addEventListener("click", () => {
08            this.count++;
09            console.log(this.count);
10        });
11    }
12}

Explanation
Bu yerda arrow function ataylab ishlatilgan, chunki bizga this.count — Counter class instance'iga ishora qilishi kerak, tugmaning o'ziga emas. Agar oddiy function ishlatilganda, this.count xato bo'lardi (this — tugmaga ishora qilardi, unda count yo'q).

33.6 removeEventListener()

Simple Explanation

Qo'shilgan event listener'ni olib tashlash uchun ishlatiladi.

Example

script.js
JavaScriptNusxalash
01function handleClick() {
02    console.log("Bosildi");
03}
04 
05button.addEventListener("click", handleClick);
06 
07// Keyinroq:
08button.removeEventListener("click", handleClick);

⚠️ Common Mistake
removeEventListener() — faqat aynan bir xil function havolasi bilan ishlaydi. Anonim function (function(){...} to'g'ridan-to'g'ri addEventListenerga yozilgan) qo'shilgan bo'lsa, uni keyinchalik olib tashlab bo'lmaydi, chunki har safar yangi function "havolasi" yaratiladi.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task:
<button id="btn"> elementiga click hodisasi uchun listener qo'shing, u bosilganda konsolga "Bosildi!" chiqarsin.
Required Concepts:

• addEventListener
  Hint:
  btn.addEventListener("click", () => console.log("Bosildi!"));

🟡 Exercise 2 — Medium

Task:
<input id="nameInput"> elementiga input hodisasi uchun listener qo'shing, foydalanuvchi yozgan sari, uning yozgan matnini <p id="output"> elementiga chiqarib boring.
Required Concepts:

• input event
• event.target.value
• textContent
  Hint:
  event.target.valueni output.textContentga tenglashtiring.

🔴 Exercise 3 — Hard

Task:
Oddiy forma yarating (email input va submit tugmasi bilan). submit hodisasida preventDefault() chaqiring, email formatini tekshiring (includes("@") bilan), agar noto'g'ri bo'lsa xatolik xabarini <p> elementiga chiqaring, to'g'ri bo'lsa "Muvaffaqiyatli yuborildi" deb ko'rsating.
Required Concepts:

• submit event
• preventDefault
• Validation
  Hint:
  Chapter 33.4'dagi misolga o'xshab yozing, validatsiya qo'shing.

🔮 Predict the Output

script.js
JavaScriptNusxalash
01let btn = document.getElementById("btn");
02 
03btn.addEventListener("click", function () {
04    console.log(this.tagName);
05});
06 
07btn.addEventListener("click", () => {
08    console.log(this);
09});

🧠 Think first! Javobni ko'rishdan oldin kamida 30 soniya o'ylang.

<details> <summary>Answer</summary> Birinchi listener: "BUTTON" (agar btn — &lt;button&gt; elementi bo'lsa) Ikkinchi listener: tashqi scope'ning thisi (masalan, brauzerda modul bo'lmasa — window, yoki undefined strict mode'da)

Why?
Oddiy function ichida this — elementning o'ziga ishora qiladi (addEventListenerning maxsus xatti-harakati). Arrow function esa o'zining thisiga ega emas, u yozilgan joydagi tashqi thisni meros oladi — bu holatda global scope.

</details>

🐛 Debugging Challenge

Quyidagi kodda muammo bor:

index.html
HTMLNusxalash
01<form id="myForm">
02    <input type="text">
03    <button type="submit">Yuborish</button>
04</form>

script.js
JavaScriptNusxalash
01document.getElementById("myForm").addEventListener("submit", function () {
02    console.log("Forma yuborildi");
03    // Lekin sahifa har safar qayta yuklanadi va konsol tozalanadi
04});

Your Task:

• Nima uchun sahifa qayta yuklanayotganini tushuntiring.
• Kodni tuzating.

<details> <summary>Solution</summary> Muammo: submit hodisasining standart xatti-harakati — sahifani qayta yuklash (yoki action atributida ko'rsatilgan manzilga yuborish). event.preventDefault() chaqirilmagani uchun, bu standart xatti-harakat oldini olinmagan.

Yechim:

script.js
JavaScriptNusxalash
01document.getElementById("myForm").addEventListener("submit", function (event) {
02    event.preventDefault();
03    console.log("Forma yuborildi");
04});

</details>

📌 Chapter Summary

• Event — sahifada yuz beradigan foydalanuvchi harakati yoki tizim hodisasi.
• addEventListener(type, callback) — hodisaga "tinglovchi" qo'shadi.
• event.target — hodisa yuz bergan aniq elementni ko'rsatadi.
• preventDefault() — elementning standart xatti-harakatini to'xtatadi.
• Oddiy function'da this — elementga ishora qiladi, arrow function'da esa tashqi scope'dan meros olinadi.

🎯 Key Takeaways

• preventDefault() — formalar va linklar bilan ishlashda deyarli har doim kerak bo'ladi.
• Event handler'da elementning o'ziga this orqali murojaat qilish kerak bo'lsa — oddiy function, tashqi thisni saqlash kerak bo'lsa — arrow function ishlating.
• removeEventListener() faqat nomlangan (anonim bo'lmagan) function bilan ishlaydi.
• event.target — bir nechta elementga umumiy handler yozishda muhim rol o'ynaydi (Chapter 34).
• input hodisasi — real vaqtda foydalanuvchi kiritayotgan ma'lumotni kuzatish uchun ishlatiladi.

⚡ Quick Cheat Sheet

script.js
JavaScriptNusxalash
01element.addEventListener("click", function (event) {
02    console.log(event.target);
03    event.preventDefault();
04});
05 
06element.removeEventListener("click", namedFunction);
07 
08// this — elementga ishora qiladi (oddiy function)
09element.addEventListener("click", function () {
10    this.classList.toggle("active");
11});

---