Die verkryging van die teikenelement tydens gebeurtenisborrel

Kom ons het twee elemente: div en 'n paragraaf p, wat binne hierdie div lê:

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

Laat ons 'n verwysing na ons div in 'n veranderlike kry:

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

Laat ons aan ons etikette 'n paar style voeg:

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

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

Laat daar nou 'n klikhanterer op die div geplaas wees:

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

Omdat ons div padding het, wanneer ons op die div klik, kan ons op die paragraaf tref, of ons kan op die plek tref waar hierdie paragraaf nie is nie, dit wil sê direk op die div.

Terselfdertyd sal this in die klikhanterer altyd verwys na die element waarop die hanterer geplaas is. In ons geval is dit ons div:

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

Ons kan eger die presiese etiket kry waarin die gebeurtenis plaasgevind het. Vir dit kan ons kyk wat in event.target lê:

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

Hierdie twee opsies kan onderskei word met behulp van voorwaardes:

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

div.addEventListener('click', function(event) {
	if (event.target.tagName === 'DIV') {
		console.log('kliek presies op die div');
	}
	if (event.target.tagName === 'P') {
		console.log('kliek presies op die paragraaf');
	}
});

In plaas van tagName kan matches gebruik word:

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

div.addEventListener('click', function(event) {
	if (event.target.matches('div')) {
		console.log('kliek presies op die div');
	}
	if (event.target.matches('p')) {
		console.log('kliek presies op die paragraaf');
	}
});

Die volgende elemente word gegee:

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

Plaas 'n klikhanterer op die div. In hierdie hanterer, bepaal in watter van die etikette die gebeurtenis plaasgevind het.

Wysig die vorige taak. Maak dit sodat wanneer op li geklik word, 'n uitroepteken aan die einde daarvan gevoeg word, en wanneer op ul geklik word, inligting oor dit na die konsole uitgeskryf word.