Elementi i ngjarjes në objektin Event në JavaScript

Objekti Event gjithashtu lejon marrjen e elementit në të cilin ka ndodhur ngjarja. Ky element përmbahet në vetinë target. Pse është e nevojshme kjo, nëse ky element përmbahet në this?

Çështja është se në fakt this gjithmonë përmban elementin, të cilit i ishte lidhur ngjarja, ndërsa vetia target - elementin në të cilin është klikuar në mënyrë reale. Ky element real mund të përputhet me this, ose mund të mos përputhet.

Le ta shohim me një shembull. Le të themi se kemi një div, dhe brenda saj një paragraf:

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

Le ta lidhim ngjarjen me div, por të klikojmë te paragrafi. Është e qartë se klikimi në paragraf përfaqëson në të njëjtën kohë edhe një klik në div, pasi paragrafi përmbahet në div-in tonë.

Në rastin e përshkruar, do të rezultojë se vetia target do të përmbajë elementin përfundimtar, në të cilin ka ndodhur ngjarja - domethënë paragrafin, dhe jo div-in. Le ta verifikojmë këtë:

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

elem.addEventListener('click', function(event) {
	console.log(event.target); // do të shfaqë paragrafin tonë
	console.log(this);         // do të shfaqë div-in tonë
});

Le të themi se keni një listë ul me elementë li:

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

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

Lidhni te elementi ul një përpunues klikimi. Në këtë përpunues, kontrolloni duke përdorur vetinë tagName, te cili element është klikuar. Nëse klikimi ishte në elementin li - shtoni në fund të tekstit të atij elementi një pikëçuditëse. Por nëse klikimi ishte në elementin ul - shfaqni informacion për këtë në konsol.