Upatajwa wa Kipengele Lengwa wakati wa Fuatilia Matukio

Tuchukulie tuna vipengele viwili: div na aya p, iliyomo ndani ya div hiyo:

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

Tupate kiungo kwa div yetu kwenye kutofautisha:

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

Tuongeze mitindo kwa vitambulisho vyetu:

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

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

Tuchukulie sasa kichakataji cha kubonyeza kimewekwa kwenye div:

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

Kwa sababu div yetu ina padding, basi, tunapobonyeza div, tunaweza kubonyeza aya, au tunaweza kubonyeza sehemu ambayo hayuko aya hiyo, yaani moja kwa moja kwenye div.

Wakati huo huo kichakataji cha kubonyeza this daima itaelekeza kwenye kipengele ambacho kimewekwa kichakataji. Katika kesi yetu hii ni div yetu:

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

Hata hivyo, tunaweza kupata hasa kitambulisho, ambacho tukio limetokea. Kwa hili tunaweza kuangalia kile kilichomo kwenye event.target:

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

Inawezekana kutofautisha chaguzi hizi mbili kwa kutumia masharti:

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

div.addEventListener('click', function(event) {
  if (event.target.tagName === 'DIV') {
    console.log('kubonyeza hasa kwenye div');
  }
  if (event.target.tagName === 'P') {
    console.log('kubonyeza hasa kwenye aya');
  }
});

Badala ya tagName inaweza kutumika matches:

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

div.addEventListener('click', function(event) {
  if (event.target.matches('div')) {
    console.log('kubonyeza hasa kwenye div');
  }
  if (event.target.matches('p')) {
    console.log('kubonyeza hasa kwenye aya');
  }
});

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