# JavaScript hodisalar (event, addEventListener)

> JavaScript hodisalari: addEventListener bilan tugma bosishini tinglash, event obyekti, preventDefault va hodisa turlari. Sahifani jonlantirishni o'rganing.

Manba: https://learncode.uz/javascript/hodisalar/
Sana: 2026-05-29

Shu paytgacha kod bir marta, yuqoridan pastga bajarildi. Endi uni
**foydalanuvchi harakatiga** bog'laymiz: tugma bosilganda, matn kiritilganda,
forma yuborilganda.

## addEventListener

```js
const button = document.querySelector("#button");

button.addEventListener("click", () => {
  console.log("Tugma onClick!");
});

console.log("Tinglovchi o'rnatildi");
```

```html
<button id="button">Bosing</button>
```

Ishga tushirgach, natija oynasidagi tugmani **bir necha marta bosing** —
har bosishda yangi xabar chiqadi.

Tuzilishi: `element.addEventListener("hodisa", funksiya)`. Funksiya hodisa
sodir bo'lganda chaqiriladi.

> **Atama**
>
> **Hodisa** (event) — sahifada sodir bo'ladigan voqea: bosish, matn kiritish,
> sichqoncha harakati, sahifa yuklanishi. **Tinglovchi** (listener) — o'sha
> voqea sodir bo'lganda chaqiriladigan funksiya.

## Sanagich misoli

```js
let n = 0;
const counter = document.querySelector("#counter");

document.querySelector("#button").addEventListener("click", () => {
  n++;
  counter.textContent = n;
});

console.log("Tugmani bosib ko'ring");
```

```html
<button id="button">+1</button>
<span id="counter" style="margin-left:10px;font-size:20px;font-weight:bold">0</span>
```

`n` o'zgaruvchisi tinglovchidan **tashqarida** e'lon qilingan — shuning uchun
qiymati bosishlar orasida saqlanib qoladi.

## event obyekti

Tinglovchi funksiya hodisa haqidagi ma'lumotni oladi:

```js
function onClick(e) {
  console.log("Bosilgan:", e.target.textContent);
  console.log("ID:", e.target.id);
  console.log("Turi:", e.type);
}

document.querySelector("#a").addEventListener("click", onClick);
document.querySelector("#b").addEventListener("click", onClick);

console.log("Ikkala tugmani bosing");
```

```html
<button id="a">Birinchi</button>
<button id="b">Ikkinchi</button>
```

`e.target` — hodisa **qaysi elementda** sodir bo'lganini beradi. Shu sababli
bitta funksiyani bir necha elementga ulash mumkin.

## Ko'p uchraydigan hodisalar

| Hodisa | Qachon sodir bo'ladi |
|---|---|
| `click` | element bosilganda |
| `input` | maydonga yozilganda (har harfda) |
| `change` | qiymat o'zgarib, fokus ketganda |
| `submit` | forma yuborilganda |
| `keydown` | klavisha bosilganda |
| `mouseover` | sichqoncha element ustiga kelganda |

## input — jonli kiritish

```js
const field = document.querySelector("#field");
const result = document.querySelector("#result");

field.addEventListener("input", (e) => {
  result.textContent = e.target.value.toUpperCase();
});

console.log("Maydonga yozib ko'ring");
```

```html
<input id="field" placeholder="Yozing...">
<p id="result">—</p>
```

`input` hodisasi **har bir harfda** ishlaydi, `e.target.value` esa maydondagi
joriy matnni beradi.

## preventDefault — odatiy xatti-harakatni to'xtatish

Ba'zi elementlarning tug'ma xatti-harakati bor: havola sahifani almashtiradi,
forma sahifani qayta yuklaydi. Uni to'xtatish mumkin:

```js
document.querySelector("#havola").addEventListener("click", (e) => {
  e.preventDefault();
  console.log("Havola onClick, lekin o'tilmadi");
});

console.log("Havolani bosing");
```

```html
<a id="havola" href="https://example.com">Bu havola ochilmaydi</a>
```

Bu forma bilan ishlashda ayniqsa muhim —
[keyingi darsda](https://learncode.uz/javascript/formalar) ko'ramiz.

## Tinglovchini olib tashlash

```js
const button = document.querySelector("#button");

function once() {
  console.log("Bajarildi!");
  button.removeEventListener("click", once);
}

button.addEventListener("click", once);
console.log("Tugmani ikki marta bosing");
```

```html
<button id="button">Faqat bir marta ishlaydi</button>
```

Buning uchun funksiya **nomlangan** bo'lishi shart — arrow funksiyani
o'chirib bo'lmaydi, chunki unga havola saqlanmaydi.

Soddaroq yo'l — `{ once: true }` sozlamasi:

```js
tugma.addEventListener("click", () => {
  console.log("Bir marta");
}, { once: true });
```

## Amaliy mashq

Interaktiv sahifa yarating:

1. Tugma qo'shib, bosilganda xabar chiqaring;
2. sanagich yasang — har bosishda son ortsin;
3. "Kamaytirish" tugmasini ham qo'shing;
4. input maydonidan matnni olib, sahifada ko'rsating;
5. `e.target` orqali qaysi tugma bosilganini aniqlang;
6. havolaga `preventDefault` qo'llang.

2-qadamda `let n = 0` ni tinglovchi **ichiga** ko'chiring — nima o'zgaradi?

## Qisqacha xulosa

- `addEventListener("hodisa", funksiya)` — hodisani tinglaydi.
- **event obyekti** hodisa haqida ma'lumot beradi; `e.target` — manba element.
- Asosiy hodisalar: `click`, `input`, `change`, `submit`, `keydown`.
- `e.preventDefault()` odatiy xatti-harakatni to'xtatadi.
- `removeEventListener` yoki `{ once: true }` bilan tinglovchi olib tashlanadi.

Keyingi darsda [formalar](https://learncode.uz/javascript/formalar) — foydalanuvchi kiritgan
ma'lumotni olish va tekshirishni ko'ramiz.