Το Στοιχείο Συμβάντος στο Αντικείμενο Event στην JavaScript

Το αντικείμενο Event επιτρέπει επίσης την λήψη του στοιχείου στο οποίο συνέβη το συμβάν. Αυτό το στοιχείο περιέχεται στην ιδιότητα target. Γιατί αυτό είναι απαραίτητο, αν αυτό το στοιχείο περιέχεται στο this;

Το γεγονός είναι ότι στην πραγματικότητα το this πάντα περιέχει το στοιχείο, στο οποίο ήταν συνδεδεμένο το συμβάν, ενώ η ιδιότητα target - το στοιχείο, στο οποίο πραγματικά έγινε το κλικ. Αυτό το πραγματικό στοιχείο μπορεί να συμπίπτει με το this, ή μπορεί να μην συμπίπτει.

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

<div id="elem">
	<p>κείμενο</p>
</div>

Ας δέσουμε ένα συμβάν στο div, αλλά ας κάνουμε κλικ στην παράγραφο. Προφανώς, το κλικ στην παράγραφο αντιπροσωπεύει ταυτόχρονα και κλικ στο div, αφού η παράγραφος περιέχεται στο div μας.

Στην περιγραφόμενη περίπτωση, η ιδιότητα target θα περιέχει την τελική ετικέτα, στην οποία συνέβη το συμβάν - δηλαδή την παράγραφο, και όχι το div. Ας το διαπιστώσουμε:

let elem = document.querySelector('#elem');

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

Ας υποθέσουμε ότι έχετε μια λίστα ul με ετικέτες li:

ul {
	padding: 30px;
	border: 1px solid red;
}
li {
	list-style-type: none;
	margin-bottom: 20px;
	border: 1px dashed black;
}

<ul id="elem">
	<li>κείμενο</li>
	<li>κείμενο</li>
	<li>κείμενο</li>
	<li>κείμενο</li>
	<li>κείμενο</li>
</ul>

Δέστε στην ετικέτα ul έναν χειριστή κλικ. Σε αυτόν τον χειριστή ελέγξτε χρησιμοποιώντας την ιδιότητα tagName, πάνω σε ποια ετικέτα έγινε το κλικ. Αν το κλικ έγινε πάνω στην ετικέτα li - προσθέστε στο τέλος του κειμένου αυτής της ετικέτας ένα θαυμαστικό. Και αν το κλικ έγινε στην ετικέτα ul - εμφανίστε πληροφορίες για αυτό στην κονσόλα.