Hodisalar ko'tarilishida maqsadli elementni olish

Faraz qilaylik, bizda ikkita element bor: div va shu div ichida joylashgan p abzasi:

html<div>
  <p></p>
</div>

Keling, divimizga havolani o'zgaruvchiga olaylik:

javascriptlet div = document.querySelector('div');

Keling, teglarimizga ba'zi uslublarni qo'shamiz:

cssdiv {
  padding: 20px;
  border: 1px solid red;
}

p {
  width: 200px;
  height: 200px;
  border: 1px solid green;
}

Endi faraz qilaylik, divga bosish ishlovchisi qo'shilgan:

javascriptdiv.addEventListener('click', function() {
  console.log('click');
});

Divimizda padding bo'lgani sababli, divni bosganimizda, biz abzas ustiga bosa olamiz, yoki abzas bo'lmagan joyga, ya'ni to'g'ridan-to'g'ri div ustiga bosa olamiz.

Bunda bosish ishlovchisida this har doim ishlovchi bog'langan elementni ko'rsatadi. Bizning holatda bu divimiz:

javascriptdiv.addEventListener('click', function() {
  console.log(this); // div
});

Biroq, biz aynan hodisa yuz bergan tegni olishimiz mumkin. Buning uchun event.target da nima yotganini ko'rib chiqishimiz mumkin:

javascriptdiv.addEventListener('click', function(event) {
  console.log(event.target); // div yoki abzas
});

Bu ikkita variantni shartlar yordamida farqlash mumkin:

javascriptlet div = document.querySelector('div');

div.addEventListener('click', function(event) {
  if (event.target.tagName === 'DIV') {
    console.log('bosish aynan div ustida');
  }
  if (event.target.tagName === 'P') {
    console.log('bosish aynan abzas ustida');
  }
});

tagName o'rniga matches dan foydalanish mumkin:

javascriptlet div = document.querySelector('div');

div.addEventListener('click', function(event) {
  if (event.target.matches('div')) {
    console.log('bosish aynan div ustida');
  }
  if (event.target.matches('p')) {
    console.log('bosish aynan abzas ustida');
  }
});

html<div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</div>

cssdiv, ul, li {
  padding: 20px;
}

div {
  border: 1px solid red;
}
ul {
  border: 1px solid orange;
}
li {
  border: 1px solid green;
}