MohirDox

Ko'rinishi

JavaScript HTML DOM Hodisa tinglovchisi (EventListener) ​

addEventListener() metodi ​

Misol ​

Tugma bosilganda (click) vaqtni ko'rsatadigan hodisa tinglovchisini qo'shish:

js
document.getElementById('myBtn').addEventListener('click', displayDate)

addEventListener() metodi belgilangan elementga hodisa ishlovchisini biriktiradi.

  • addEventListener() metodi mavjud hodisa ishlovchilarini o'chirib yubormasdan, elementga yangisini biriktiradi.
  • Bitta elementga ko'plab hodisa ishlovchilarini qo'shishingiz mumkin.
  • Bitta elementga bir xil turdagi ko'plab hodisa ishlovchilarini qo'shishingiz mumkin, masalan, ikkita "click" hodisasi.
  • Hodisa tinglovchilarini nafaqat HTML elementlariga, balki har qanday DOM obyektiga (masalan, window obyektiga) qo'shishingiz mumkin.
  • addEventListener() metodi hodisaning qatlamlar bo'ylab tarqalishini (bubbling) boshqarishni osonlashtiradi.
  • addEventListener() metodidan foydalanganda JavaScript HTML-dan ajratiladi, bu kodning o'qilishini yaxshilaydi.
  • removeEventListener() metodi yordamida hodisa tinglovchisini osongina olib tashlashingiz mumkin.

Sintaksis ​

js
element.addEventListener(event, function, useCapture)
  1. Birinchi parametr — hodisa turi (masalan, "click" yoki "mousedown").
  2. Ikkinchi parametr — hodisa sodir bo'lganda chaqiriladigan funksiya.
  3. Uchinchi parametr — useCapture (ixtiyoriy), hodisaning tarqalish usulini (bubbling yoki capturing) belgilaydigan mantiqiy (boolean) qiymat.

Eslatma

Hodisa uchun "on" prefiksini ishlatmang; "onclick" o'rniga "click" ishlating.

Elementga hodisa ishlovchisini qo'shish ​

Misol ​

Foydalanuvchi elementni bosganda "Salom Dunyo!" deb xabar chiqarish:

js
element.addEventListener('click', function () {
  alert('Salom Dunyo!')
})

Shuningdek, tashqi "nomlangan" funksiyaga ham murojaat qilishingiz mumkin:

js
element.addEventListener('click', myFunction)

function myFunction() {
  alert('Salom Dunyo!')
}

Bitta elementga ko'plab hodisa ishlovchilarini qo'shish ​

addEventListener() metodi mavjud hodisalarni o'zgartirmasdan bitta elementga ko'plab hodisalarni qo'shishga imkon beradi:

js
element.addEventListener('click', myFunction)
element.addEventListener('click', mySecondFunction)

Bitta elementga har xil turdagi hodisalarni ham qo'shishingiz mumkin:

js
element.addEventListener('mouseover', myFunction)
element.addEventListener('click', mySecondFunction)
element.addEventListener('mouseout', myThirdFunction)

window obyektiga hodisa ishlovchisini qo'shish ​

addEventListener() metodi har qanday HTML DOM obyektiga (elementlar, hujjat, oyna) hodisa tinglovchilarini qo'shishga ruxsat beradi:

js
// Oyna (window) o'lchami o'zgarganda xabar chiqarish
window.addEventListener('resize', function () {
  document.getElementById('demo').innerHTML = "Oyna o'lchami o'zgardi!"
})

Parametrlarni uzatish ​

Parametr qiymatlarini uzatishda ko'rsatilgan funksiyani parametrlar bilan chaqiradigan "anonim funksiya"dan foydalaning:

js
element.addEventListener('click', function () {
  myFunction(p1, p2)
})

Hodisa tarqalishi: Bubbling yoki Capturing? ​

HTML DOM-da hodisalar tarqalishining ikki usuli mavjud: Bubbling (ko'piklanish) va Capturing (tutib olish).

Agar sizda <div> ichida <p> elementi bo'lsa va foydalanuvchi <p> ni bossa, qaysi elementning "click" hodisasi birinchi bo'lib boshqarilishi kerak?

  • Bubbling usulida eng ichki elementning hodisasi birinchi bo'lib boshqariladi, keyin tashqi elementlar: avval <p>, keyin <div>.
  • Capturing usulida eng tashqi elementning hodisasi birinchi bo'lib boshqariladi, keyin ichki elementlar: avval <div>, keyin <p>.

addEventListener() metodida useCapture parametri orqali tarqalish turini belgilashingiz mumkin:

js
addEventListener(event, function, useCapture)

Standart qiymat false bo'lib, u bubbling tarqalishidan foydalanadi. Agar qiymat true qilib o'rnatilsa, hodisa capturing tarqalishidan foydalanadi.

js
document.getElementById('myP').addEventListener('click', myFunction, true)
document.getElementById('myDiv').addEventListener('click', myFunction, true)

removeEventListener() metodi ​

removeEventListener() metodi addEventListener() orqali biriktirilgan hodisa ishlovchilarini olib tashlaydi:

js
element.removeEventListener('mousemove', myFunction)