Kohdeelementin saaminen tapahtumien kuplimisen yhteydessä

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

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

Saadaan viite diviimme muuttujaan:

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

Lisätään elementeillemme tyylejä:

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

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

Asetetaan nyt diville klikkaustapahtuman käsittelijä:

div.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:

div.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:

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

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

let 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:

let 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');
	}
});

Annettu seuraavat elementit:

<div>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
	</ul>
</div>

div, ul, li {
	padding: 20px;
}

div {
	border: 1px solid red;
}
ul {
	border: 1px solid orange;
}
li {
	border: 1px solid green;
}

Aseta diville klikkaustapahtuman käsittelijä. Tässä käsittelijässä määritä, missä tageista tapahtuma laukesi.

Muokkaa edellistä tehtävää. Tee niin, että kun li:tä napsautetaan, sen loppuun lisätään huutomerkki, ja kun ul:aa napsautetaan, konsoliin tulostetaan tietoja siitä.