Λήψη του στοχευμένου στοιχείου κατά την αναρρίχηση γεγονότων

Ας υποθέσουμε ότι έχουμε δύο στοιχεία: div και μια παράγραφο p, που βρίσκεται μέσα σε αυτό το div:

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

Ας πάρουμε μια αναφορά στο div μας σε μια μεταβλητή:

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

Ας προσθέσουμε μερικά στυλ στις ετικέτες μας:

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

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

Ας υποθέσουμε τώρα ότι ένας χειριστής κλικ είναι συνδεδεμένος στο div:

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

Επειδή το div μας έχει padding, όταν κάνουμε κλικ στο div, μπορούμε να πατήσουμε την παράγραφο, ή μπορούμε να πατήσουμε σε ένα σημείο όπου αυτή η παράγραφος δεν υπάρχει, δηλαδή απευθείας στο div.

Σε αυτήν την περίπτωση, στο χειριστή κλικ το this πάντα θα δείχνει στο στοιχείο στο οποίο έχει συνδεθεί ο χειριστής. Στην περίπτωσή μας αυτό είναι το div μας:

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

Ωστόσο, μπορούμε να λάβουμε ακριβώς την ετικέτα στην οποία συνέβη το συμβάν. Για αυτό μπορούμε να δούμε τι βρίσκεται στο event.target:

div.addEventListener('click', function(event) {
	console.log(event.target); // είτε το div, είτε η παράγραφος
});

Μπορούμε να διακρίνουμε αυτές τις δύο περιπτώσεις χρησιμοποιώντας συνθήκες:

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

div.addEventListener('click', function(event) {
	if (event.target.tagName === 'DIV') {
		console.log('κλικ ακριβώς στο div');
	}
	if (event.target.tagName === 'P') {
		console.log('κλικ ακριβώς στην παράγραφο');
	}
});

Μπορούμε αντί για tagName να χρησιμοποιήσουμε το matches:

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

div.addEventListener('click', function(event) {
	if (event.target.matches('div')) {
		console.log('κλικ ακριβώς στο div');
	}
	if (event.target.matches('p')) {
		console.log('κλικ ακριβώς στην παράγραφο');
	}
});

Δίνονται τα ακόλουθα στοιχεία:

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

Συνδέστε έναν χειριστή κλικ στο div. Σε αυτόν τον χειριστή, προσδιορίστε σε ποια από τις ετικέτες πυροδοτήθηκε το συμβάν.

Τροποποιήστε την προηγούμενη εργασία. Κάντε το έτσι ώστε όταν γίνεται κλικ σε ένα li, να προστίθεται ένα θαυμαστικό στο τέλος της, και όταν γίνεται κλικ στο ul να εμφανίζονται πληροφορίες για αυτό στην κονσόλα.