Marrja e elementit të synuar gjatë shfaqjes së ngjarjeve

Le të themi se kemi dy elemente: div dhe paragrafi p, i vendosur brenda këtij div:

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

Le të marrim lidhjen me div-in tonë në një variabël:

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

Le t'u shtojmë disa stile etiketave tona:

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

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

Le të themi se tani në div është vendosur një përpunues i klikimeve:

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

Për shkak se div-i ynë ka padding, kur klikojmë në div, mund të klikojmë në paragraf, ose mund të klikojmë në vendin ku ky paragraf nuk është, domethënë direkt në div.

Në këtë rast, në përpunuesin e klikimit this gjithmonë do të tregojë në atë element, në të cilin është vendosur përpunuesi. Në rastin tonë ky është div-i ynë:

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

Sidoqoftë, ne mund të marrim pikërisht atë etiketë, ku ka ndodhur ngjarja. Për këtë ne mund të shohim se çfarë gjendet në event.target:

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

Këto dy variante mund t'i dallojmë duke përdorur kushte:

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

div.addEventListener('click', function(event) {
	if (event.target.tagName === 'DIV') {
		console.log('klikim pikërisht në div');
	}
	if (event.target.tagName === 'P') {
		console.log('klikim pikërisht në paragraf');
	}
});

Në vend të tagName mund të përdorni matches:

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

div.addEventListener('click', function(event) {
	if (event.target.matches('div')) {
		console.log('klikim pikërisht në div');
	}
	if (event.target.matches('p')) {
		console.log('klikim pikërisht në paragraf');
	}
});

Janë dhënë elementet e mëposhtme:

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

Vendosni në div një përpunues klikimi. Në këtë përpunues përcaktoni, në cilën prej etiketave ka ndodhur ngjarja.

Modifikoni detyrën e mëparshme. Bëni që kur klikohet në li, asaj i shtohet në fund një pikëçuditëse, kurse kur klikohet në ul në konsol të printohet informacion për këtë.