Tikslinio elemento gavimas įvykių plitimo metu

Tarkime, kad turime du elementus: div ir pastraipą p, esančią šio div viduje:

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

Gaukime nuorodą į mūsų div kintamajame:

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

Pridėkime kai kuriuos stilius mūsų žymoms:

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

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

Tarkime, kad dabar div turi pridėtą paspaudimo apdorojimo funkciją:

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

Dėl to, kad mūsų div turi padding, kai mes spaudžiame ant div, galime pataikyti į pastraipą, arba galime pataikyti į vietą, kur šios pastraipos nėra, tai yra tiesiogiai į div.

Šiuo atveju paspaudimo apdorojimo funkcijoje this visada rodys į tą elementą, ant kurio pridėta apdorojimo funkcija. Mūsų atveju tai mūsų div:

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

Tačiau, mes galime gauti būtent tą žymą, kurioje įvyko įvykis. Tam mes galime patikrinti, kas yra event.target:

div.addEventListener('click', function(event) {
	console.log(event.target); // arba div, arba pastraipa
});

Galima atskirti šiuos du variantus naudojant sąlygas:

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

div.addEventListener('click', function(event) {
	if (event.target.tagName === 'DIV') {
		console.log('paspaudimas būtent ant div');
	}
	if (event.target.tagName === 'P') {
		console.log('paspaudimas būtent ant pastraipos');
	}
});

Vietoj tagName galima naudoti matches:

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

div.addEventListener('click', function(event) {
	if (event.target.matches('div')) {
		console.log('paspaudimas būtent ant div');
	}
	if (event.target.matches('p')) {
		console.log('paspaudimas būtent ant pastraipos');
	}
});

Duoti šie elementai:

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

Pridėkite prie div paspaudimo apdorojimo funkciją. Šioje apdorojimo funkcijoje nustatykite, kurioje iš žymų įvyko įvykis.

Modifikuokite ankstesnę užduotį. Padarykite taip, kad paspaudus ant li, į jos galą būtų pridėtas šauktukas, o paspaudus ant ul konsolėje būtų išvesta informacija apie tai.