Kohdeelementin saaminen tapahtumien kuplimisen yhteydessä

Oletetaan, että meillä on kaksi elementtiä: div ja kappale p, joka sijaitsee tämän divin sisällä:

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

Saadaan viite diviimme muuttujaan:

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

Lisätään elementeillemme tyylejä:

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

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

Asetetaan nyt diville klikkaustapahtuman käsittelijä:

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

Koska divillämme on padding, kun napsautamme diviä, voimme osua kappaleeseen, tai voimme osua paikkaan, jossa kappaletta ei ole, eli suoraan diviin.

Tässä klikkaustapahtuman käsittelijässä this osoittaa aina siihen elementtiin, johon käsittelijä on asetettu. Meidän tapauksessamme se on divimme:

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

Voimme kuitenkin saada juuri sen tagin, jossa tapahtuma tapahtui. Tätä varten voimme katsoa, mitä on event.target:ssa:

javascriptdiv.addEventListener('click', function(event) {
  console.log(event.target); // joko div tai kappale
});

Nämä kaksi vaihtoehtoa voidaan erotella käyttämällä ehtoja:

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

div.addEventListener('click', function(event) {
  if (event.target.tagName === 'DIV') {
    console.log('napsautus suoraan diviin');
  }
  if (event.target.tagName === 'P') {
    console.log('napsautus suoraan kappaleeseen');
  }
});

tagName:n sijasta voidaan käyttää matches:ia:

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

div.addEventListener('click', function(event) {
  if (event.target.matches('div')) {
    console.log('napsautus suoraan diviin');
  }
  if (event.target.matches('p')) {
    console.log('napsautus suoraan kappaleeseen');
  }
});

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