Mērķa elementa iegūšana notikumu izplatīšanās laikā

Pieņemsim, ka mums ir divi elementi: div un rindkopa p, kas atrodas šī div iekšpusē:

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

Iegūsim saiti uz mūsu div mainīgajā:

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

Pievienosim mūsu elementiem dažus stilus:

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

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

Pieņemsim, ka uz div ir pievienots klikšķa notikuma apstrādātājs:

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

Tā kā mūsu div ir padding, tad, kad mēs noklikšķinām uz div, mēs varam trāpīt uz rindkopas, vai arī varam trāpīt vietā, kur šīs rindkopas nav, tas ir, tieši uz div.

Šajā gadījumā klikšķa apstrādātājā this vienmēr norādīs uz to elementu, uz kuru ir pievienots apstrādātājs. Mūsu gadījumā tas ir mūsu div:

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

Tomēr mēs varam iegūt tieši to elementu, kurā notika notikums. Lai to izdarītu, mēs varam paskatīties, kas atrodas event.target:

div.addEventListener('click', function(event) {
	console.log(event.target); // vai nu div, vai rindkopa
});

Šos divus variantus var atšķirt, izmantojot nosacījumus:

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

div.addEventListener('click', function(event) {
	if (event.target.tagName === 'DIV') {
		console.log('klikšķis tieši uz div');
	}
	if (event.target.tagName === 'P') {
		console.log('klikšķis tieši uz rindkopas');
	}
});

tagName vietā var izmantot matches:

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

div.addEventListener('click', function(event) {
	if (event.target.matches('div')) {
		console.log('klikšķis tieši uz div');
	}
	if (event.target.matches('p')) {
		console.log('klikšķis tieši uz rindkopas');
	}
});

Doti šādi elementi:

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

Pievienojiet div klikšķa notikuma apstrādātāju. Šajā apstrādātājā nosakiet, kurā no elementiem tika izsaukts notikums.

Modificējiet iepriekšējo uzdevumu. Padariet tā, lai, noklikšķinot uz li, tās beigās tiktu pievienots izsaukuma zīme, bet, noklikšķinot uz ul, konsolē tiktu izvadīta informācija par to.