Окуялар көтөрүлгөндө максаттуу элементти алуу

Бизде эки элемент болсун: 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;
}

Эми дивге чыкылдатуу иштеткичи орнотулсун:

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

Биздин див padding болгондуктан, дивди чыкылдатканда, биз абзацтын үстүнө чыгышыбыз мүмкүн, же андай абзац жок жерге, башкача айтканда түз дивге түшүшүбүз мүмкүн.

Бул учурда чыкылдатуу иштеткичинде 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;
}