Animal Trading cards

4. Hodisaning fazalari

1-savol
Quyidagi kodni ishga tushirgach, bog‘lamalar va DOM qanday tuzilganligi haqida o‘ylang, sahifaga bosilganda dastlab qaysi hodisa tinglovchisi ishga tushdi? Javobingiz va nega shu tartibda bo‘lganligiga izohingizni yozing:
document.addEventListener('click', function () {
console.log('The document was clicked');
});


document.body.addEventListener('click', function () {
console.log('The document body was clicked');
});

Javob:
'The document body was clicked'
'The document was clicked'
Hodisa biron bir elementda sodir bo'lganda, u avval eng quyi hodisa tinglovchisini, so'ngra ota-onasini, so'ngra boshqa yuqoriroq (documentgacha) obyektlar hodisa tinglovchilarini ishga tushiradi.
2-savol
Quyidagi kod qaysi bosqichlarda o‘rnatish uchun keltirilgan?
const items = document.querySelectorAll('.quizzing-quizzes');
const el = items[1];


el.addEventListener('click', function () {
console.log('You clicked on the 2nd quizzing-quizzes item!');
}, false);

Izoh:
.addEventListener() metodining uchinchi argumenti capturing fazasi uchun mantiqiy tur ekanligini yodda saqlang . Uning falseligi shuni anglatadiki, hodisa tinglovchisi capturing fazasida ishga tushmasligi kerak...shuning uchun u (standart) bubble fazasida ishga tushadi.
3-savol
Quyidagi kodni ishga tushirib, sahifaga bosilgach, ikkita konsolga biriktirilgan xabar ekranda ko‘rinadi. Xabarlarni to‘g‘ri tartiblang.
document.addEventListener('click', function () {
console.log('The document was clicked');
});


document.body.addEventListener('click', function () {
console.log('The body element was clicked');
});