Hadiselerin qalxmasinda hedef elementin alinmasi

Tutaq ki, bizim iki elementimiz var: div və bu div-in içinde olan abzas p:

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

Div-ə istinadımızı dəyişəndə alaq:

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

Teqlərimizə bəzi stillər əlavə edək:

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

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

İndi isə div-ə klik hadisesi üçün emeliyyatçı əlavə edək:

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

Div-imizin padding olduğuna görə, div-ə klik etdiyimiz zaman biz ya abzasa klik edə bilərik, ya da abzasın olmadığı yere, yəni birbaşa div-ə klik edə bilərik.

Bununla belə, klik emeliyyatçısında this həmişə emeliyyatçının əlavə edildiyi elementi göstərəcək. Bizim veziyyetimizde bu bizim div-imizdir:

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

Ancaq, biz hadisenin baş verdiyi dəqiq teqi ala bilərik. Bunun üçün biz event.target-da nə olduğuna baxa bilərik:

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

Bu iki variantı şərtlər vasitəsilə fərqləndirmək olar:

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

div.addEventListener('click', function(event) {
  if (event.target.tagName === 'DIV') {
    console.log('klik birbaşa div-ə');
  }
  if (event.target.tagName === 'P') {
    console.log('klik birbaşa abzasa');
  }
});

tagName əvəzinə matches istifadə etmək olar:

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

div.addEventListener('click', function(event) {
  if (event.target.matches('div')) {
    console.log('klik birbaşa div-ə');
  }
  if (event.target.matches('p')) {
    console.log('klik birbaşa abzasa');
  }
});

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