A céléléme elérése az eseménybuborékolás során

Tegyük fel, hogy van két elemünk: div és egy p bekezdés, amely ezen a div-en belül található:

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

Kapjunk hivatkozást a div-ünkre egy változóba:

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

Adjunk hozzá néhány stílust a címkéinkhez:

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

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

Tegyük fel, hogy a div-re van egy kattintáskezelő:

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

Mivel a div-ünknek padding-je van, amikor a div-re kattintunk, vagy a bekezdésre kattintunk, vagy olyan helyre kattintunk, ahol nincs bekezdés, azaz közvetlenül a div-re.

Ekkor a kattintáskezelőben a this mindig arra az elemre fog mutatni, amelyre a kezelő fel van véve. Esetünkben ez a mi div-ünk:

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

Azonban megkaphatjuk pontosan azt a címkét, amelyben az esemény bekövetkezett. Ehhez megnézhetjük, mi van a event.target-ben:

div.addEventListener('click', function(event) {
	console.log(event.target); // vagy div, vagy bekezdés
});

Ezt a két lehetőséget megkülönböztethetjük feltételek segítségével:

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

div.addEventListener('click', function(event) {
	if (event.target.tagName === 'DIV') {
		console.log('kattintás pontosan a div-en');
	}
	if (event.target.tagName === 'P') {
		console.log('kattintás pontosan a bekezdésen');
	}
});

A tagName helyett használhatunk matches-et:

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

div.addEventListener('click', function(event) {
	if (event.target.matches('div')) {
		console.log('kattintás pontosan a div-en');
	}
	if (event.target.matches('p')) {
		console.log('kattintás pontosan a bekezdésen');
	}
});

A következő elemek adottak:

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

Vegyen fel a div-re egy kattintáskezelőt. Ebben a kezelőben határozza meg, hogy melyik címkében következett be az esemény.

Módosítsa az előző feladatot. Tegye úgy, hogy ha a li-re kattintanak, a végére kerüljön egy felkiáltójel, ha pedig a ul-ra kattintanak, a konzolba íródjon ki információ erről.