Восита ходисаларида максадли элементни олиш

Фарз қилайлик, бизда иккита элемент бор: div ва шу див ичида жойлашган p абзаци:

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

Дивга ҳаволани ўзгарувчига оламиз:

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

Тегларимизга айрим стилларни қўшамиз:

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

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

Энди дивга клик ҳодисасини қайта ishlovчини (обработчик) қўшайлик:

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

Бизнинг див paddingга эга бўлгани сабабли, дивга босганда, биз абзац устига босимиз ёки абзац бўлмаган жойга, яъни тўғри див устига босимиз.

Шу билан бирга, клик ҳодисасини қайта ishlовчида this ҳамиша ҳодиса қўйилган элементни кўрсатади. Бизнинг ҳолатда бу бизнинг дивимиз:

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

Аммо, биз айнан қайси тегда ҳодиса юз берганини билишимиз мумкин. Бунинг учун биз event.target да қайси маълумот турганини кўришимиз мумкин:

javascriptdiv.addEventListener('click', function(event) {
  console.log(event.target); // див ёки абзац
});

Бу икки вариантни шартлар ёрдамида фарқлаш мумкин:

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

div.addEventListener('click', function(event) {
  if (event.target.tagName === 'DIV') {
    console.log('айнан дивга босилди');
  }
  if (event.target.tagName === 'P') {
    console.log('айнан абзацга босилди');
  }
});

tagName ўрнига matches дан фойдаланиш мумкин:

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

div.addEventListener('click', function(event) {
  if (event.target.matches('div')) {
    console.log('айнан дивга босилди');
  }
  if (event.target.matches('p')) {
    console.log('айнан абзацга босилди');
  }
});

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;
}