DOM EventListener
addEventListener() metodi
Misol
Foydalanuvchi tugmani bosganida ishga tushadigan voqea tinglovchisini qo‘shing:
document.getElementById("myBtn").addEventListener("click", displayDate);
O‘zingiz sinab ko‘ring »
addEventListener() usuli ko‘rsatilgan elementga hodisa ishlov beruvchisini biriktiradi.
addEventListener() usuli mavjud hodisa ishlov beruvchilarini qayta yozmasdan elementga hodisa ishlov beruvchisini biriktiradi.
Bitta elementga bir nechta Event ishlov beruvchilarini qo‘shishingiz mumkin.
Bitta elementga, ya’ni ikkita "klik" hodisasiga bir xil turdagi ko‘plab hodisa ishlov beruvchilarini qo‘shishingiz mumkin.
Hodisa tinglovchilarini har qanday DOM obyektiga nafaqat HTML elementlarini qo‘shishingiz mumkin. ya’ni oyna obyekti.
addEventListener() usuli hodisaning ko‘piklanishga qanday munosabatda bo‘lishini nazorat qilishni osonlashtiradi.
addEventListener() usulidan foydalanilganda, yaxshi o‘qilishi uchun JavaScript HTML belgisidan ajratiladi
va HTML belgilashni nazorat qilmaganingizda ham voqea tinglovchilarini qo‘shish imkonini beradi.
removeEventListener() usulidan foydalanib, hodisa tinglovchisini osongina olib tashlashingiz mumkin.
Sintaksis
element.addEventListener(event, function, useCapture);
Birinchi parametr hodisa turi (masalan, "click" yoki "mousedown"
yoki boshqa HTML DOM hodisasi.)
Ikkinchi parametr - voqea sodir bo‘lganda biz chaqirmoqchi bo‘lgan funksiya.
Uchinchi parametr boolean qiymat bo‘lib, Event ko‘pikli yoki hodisani yozib olishdan foydalanishni belgilaydi. Ushbu parametr ixtiyoriy.
dan foydalanmasligingizga e’tibor bering
hodisa uchun "on" prefiksi; "onclick" o‘rniga "click" dan foydalaning.
Elementga Voqea ishlovchisi qo‘shing
Misol
Ogohlantirish "Salom dunyo!" foydalanuvchi elementni bosganda:
element.addEventListener("click", function(){ alert("Hello World!"); });
O‘zingiz sinab ko‘ring »
Siz tashqi "nomli" funksiyaga ham murojaat qilishingiz mumkin:
Misol
Ogohlantirish "Salom dunyo!" foydalanuvchi elementni bosganda:
element.addEventListener("click", myFunction);
function myFunction() {
alert ("Hello World!");
}
O‘zingiz sinab ko‘ring »
Bitta elementga bir nechta hodisa ishlovchilarini qo‘shish
addEventListener() usuli mavjud hodisalarni qayta yozmasdan, bir xil elementga ko‘plab Eventlar qo‘shish imkonini beradi:
Misol
element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);
O‘zingiz sinab ko‘ring »
Siz bir xil elementga turli xil hodisalarni qo‘shishingiz mumkin:
Misol
element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);
O‘zingiz sinab ko‘ring »
Oyna Obyektiga Voqealar ishlov beruvchisini qo‘shing
addEventListener() usuli istalgan HTML-ga voqea tinglovchilarini qo‘shish imkonini beradi
HTML elementlari, HTML hujjati, oyna obyekti yoki boshqalar kabi DOM obyekti
xmlHttpRequest obyekti kabi hodisalarni qo‘llab-quvvatlaydigan obyektlar.
Misol
Foydalanuvchi oyna o‘lchamini o‘zgartirganda ishga tushadigan voqea tinglovchisini qo‘shing:
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = sometext;
});
O‘zingiz sinab ko‘ring »
Parametrlarni uzatish
Parametr qiymatlarini o‘tkazishda ko‘rsatilgan funksiyani parametrlar bilan chaqiradigan "anonim Function" dan foydalaning:
Misol
element.addEventListener("click", function(){ myFunction(p1, p2); });
O‘zingiz sinab ko‘ring »
Event bubbling yoki event capturing?
HTML DOM-da hodisalarni tarqatishning ikki yo‘li mavjud: pufaklash va yozib olish.
Hodisalarning tarqalishi - bu hodisa sodir bo‘lganda element tartibini aniqlash usuli. Agar sizda <div> elementi ichida <p> elementi bo‘lsa va foydalanuvchi <p> elementiga bosgan bo‘lsa, qaysi elementning "klik" hodisasi birinchi bo‘lib ishlov berilishi kerak?
Ko‘p bo‘lmagan ichki elementning hodisasi birinchi bo‘lib, so‘ngra tashqi: avval
elementining bosish hodisasi, so‘ngra
Tashqi ko‘pchilik elementning hodisasini suratga olishda avvalo, so‘ngra ichki hodisa qayta ishlanadi: avval
elementining bosish hodisasi ishlanadi.
addEventListener() usuli yordamida siz "useCapture" parametridan foydalanib tarqalish turini belgilashingiz mumkin:
addEventListener(event, function, useCapture);
Standart qiymat noto‘g‘ri bo‘lib, u ko‘pikli tarqalishdan foydalanadi, qiymat rostga o‘rnatilganda, hodisa yozib olish tarqalishidan foydalanadi.
Misol
document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);
O‘zingiz sinab ko‘ring »
removeEventListener() metodi
removeEventListener() usuli sodir bo‘lgan voqea ishlovchilarni olib tashlaydi
addEventListener() usuli bilan biriktirilgan:
HTML DOM Event obyekti bo‘yicha ma’lumotnoma
Barcha HTML DOM hodisalari ro‘yxatini ko‘rish uchun bizning to‘liq HTML DOM hodisasi obyekti ma’lumotnomamizga qarang.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!