Hadisə emal ediciləri

Hadisəyə funksiya bağla

Hadisə klik, yazı, fokus və başqa brauzer hərəkətidir. addEventListener hadisə baş verəndə çağırılacaq funksiyanı qeyd edir. Funksiyanı dərhal çağırma: handleClick, handleClick()-dən fərqlidir.

<button type="button" id="toggle">Tamamlanmayıb</button>
<script>
  const button = document.querySelector('#toggle');
  function handleClick(event) {
    const completed = event.currentTarget.classList.toggle('completed');
    event.currentTarget.textContent = completed ? 'Tamamlandı' : 'Tamamlanmayıb';
  }
  button.addEventListener('click', handleClick);
  // button.removeEventListener('click', handleClick);
</script>

Nümunə

Hədəf və dinləyici

event.target hadisənin başladığı element, event.currentTarget cari dinləyicinin qoşulduğu elementdir. İçəridə ikon varsa bunlar fərqli ola bilər. preventDefault ilkin brauzer hərəkətini dayandırır, hadisənin yayılmasını avtomatik dayandırmır.

Dinləyicini silmək üçün eyni funksiya istinadını və uyğun capture parametrini ver. Ayrı yazılmış iki anonim funksiya eyni deyil. Semantik button Enter və Space ilə də işləyir; sadə div-ə klik bağlamaq bu davranışı avtomatik yaratmır. Qlobal hadisələrə abunəliyi lazım olmadıqda təmizlə.

Əlavə qeydlər və mənbələr

addEventListener funksiyanı hadisəyə bağlayır, event obyekti hadisənin hədəfini göstərir. Dinləyicini silmək üçün eyni funksiya istinadını saxla; məzmunu dəyişən hərəkətlərdə semantik düymələrdən istifadə et.

Niyə vacibdir?

DOM HTML sənədinin proqramlaşdırma vasitəsilə işləyə bildiyin təqdimatıdır.

Əvvəlki biliklər

JavaScript əsasları

Bu mövzuda

addEventListener və removeEventListener
event, target və currentTarget
Klik və klaviatura hadisələri

Mövzuya baxış

Mənbələr

Məşqin idarəetməsi

Addım 1 / 2

Hadisəni dinlə

Dinləyicini qoş, klik hadisəsini işlə, sonra abunəliyi təmizlə.

Prosesi son vəziyyətə çatdır.

Dinləyici yoxdur
Dinləyici qoşulub
Hadisə işləndi
Dinləyici silindi

Dinləyici yoxdur

Düymə üçün hələ emal funksiyası qoşulmayıb.

button

Bu məşq prosesi modelləşdirir.

Özün sına

Alış-veriş siyahısında düyməyə kliklə məhsulu tamamlanmış işarələ. Sonra dinləyicini silən ayrıca idarəetmə əlavə et və klaviatura ilə yoxla.

Nəticəni necə yoxlayım?

Klik və klaviatura düyməni işlədir; dinləyici eyni funksiya istinadı ilə silinə bilir.

Gözlənilən nəticə

Tamamla seçiləndə mətn Tamamlandı: Kitab al olur.
Dinləyicini sil düyməsindən sonra əməl daha icra olunmur.

Görünüş nümunəsi

Bu, görünüş nümunəsidir. İnteraktiv davranışı kodu öz layihəndə işlədərək yoxla.

Nümunə həllə bax

Əvvəl özün sına, sonra müqayisə et. Bu, mümkün həllərdən biridir.

Dinləyicini silmək üçün eyni funksiya istinadı saxlanır. Native button Enter və Space ilə işləyir.

index.html

<p id="item">Kitab al</p><button id="complete" type="button">Tamamla</button><button id="stop" type="button">Dinləyicini sil</button>
<script src="main.js"></script>

main.js

const item = document.querySelector('#item');
const button = document.querySelector('#complete');
function complete() { item.textContent = 'Tamamlandı: Kitab al'; }
button.addEventListener('click', complete);
document.querySelector('#stop').addEventListener('click', () => {
  button.removeEventListener('click', complete);
  button.disabled = true;
});

Praktikanı bitirdin?Özün qiymətləndirirsən. İrəliləyiş bu brauzerdə saxlanılır.