მოვლენის ელემენტი 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 ტეგზე - გამოიტანეთ ინფორმაცია ამის შესახებ კონსოლში.