Element zdarzenia w obiekcie Event w JavaScript

Obiekt Event również pozwala uzyskać element, w którym wystąpiło zdarzenie. Ten element jest zawarty we właściwości target. Po co to jest potrzebne, skoro ten element jest zawarty w this?

Chodzi o to, że w rzeczywistości this zawsze zawiera element, do którego było przypisane zdarzenie, a właściwość target - element, w który rzeczywiście nastąpiło kliknięcie. Ten rzeczywisty element może pokrywać się z this, a może nie pokrywać się.

Spójrzmy na przykład. Załóżmy, że mamy div, a wewnątrz niego akapit:

<div id="elem">
	<p>tekst</p>
</div>

Przypiszmy zdarzenie do diva, ale kliknijmy w akapit. Oczywiste jest, że kliknięcie w akapit stanowi jednocześnie kliknięcie w diva, ponieważ akapit jest zawarty w naszym divie.

W opisanym przypadku okaże się, że właściwość target będzie zawierać końcowy tag, w którym wystąpiło zdarzenie - czyli akapit, a nie div. Przekonajmy się o tym:

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

elem.addEventListener('click', function(event) {
	console.log(event.target); // wypisze nasz akapit
	console.log(this);         // wypisze nasz div
});

Załóżmy, że masz listę ul z tagami li:

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

<ul id="elem">
	<li>tekst</li>
	<li>tekst</li>
	<li>tekst</li>
	<li>tekst</li>
	<li>tekst</li>
</ul>

Przypisz do tagu ul obsługę kliknięcia. W tej obsłudze sprawdzaj za pomocą właściwości tagName, w który tag nastąpiło kliknięcie. Jeśli kliknięcie nastąpiło w tag li - dodaj na końcu tekstu tego tagu wykrzyknik. A jeśli kliknięcie nastąpiło w tag ul - wypisz informację o tym w konsoli.