Hente det målelementet ved hendelsesbobling

La oss si at vi har to elementer: div og et avsnitt p som ligger inne i denne diven:

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

La oss få en referanse til diven vår i en variabel:

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

La oss legge til noen stiler til taggene våre:

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

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

La oss nå si at det er en klikk-håndterer festet til diven:

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

På grunn av at diven vår har padding, kan vi, når vi klikker på diven, treffe avsnittet, eller vi kan treffe et sted hvor dette avsnittet ikke er, det vil direkte på diven.

Samtidig vil this i klikk-håndtereren alltid peke på det elementet som håndtereren er festet til. I vårt tilfelle er dette diven vår:

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

Imidlertid kan vi få tak i nettopp den taggen der hendelsen inntraff. For å gjøre dette kan vi se hva som ligger i event.target:

div.addEventListener('click', function(event) {
	console.log(event.target); // enten diven eller avsnittet
});

Vi kan skille mellom disse to variantene ved hjelp av betingelser:

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

div.addEventListener('click', function(event) {
	if (event.target.tagName === 'DIV') {
		console.log('klikk nettopp på diven');
	}
	if (event.target.tagName === 'P') {
		console.log('klikk nettopp på avsnittet');
	}
});

I stedet for tagName kan vi bruke matches:

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

div.addEventListener('click', function(event) {
	if (event.target.matches('div')) {
		console.log('klikk nettopp på diven');
	}
	if (event.target.matches('p')) {
		console.log('klikk nettopp på avsnittet');
	}
});

Følgende elementer er gitt:

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

Fest en klikk-håndterer til diven. I denne håndtereren, avgjør i hvilken av taggene hendelsen utløste.

Modifiser den forrige oppgaven. Gjør slik at når du klikker på li, blir et utropstegn lagt til på slutten, og når du klikker på ul, blir informasjonen om dette skrevet ut i konsollen.