Оқиғалардың орындалуы кезінде нысана элементін алу

Бізде екі элемент бар делік: div және осы div ішінде жатқан p абзацы:

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

Div-ті айнымалыға сілтеме ретінде алайық:

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

Тегтерімізге бірнеше стильдер қосамыз:

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

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

Енді div-те басу оқиғасын өңдегіш орнатайық:

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

Біздің div-де padding болғандықтан, biz div-ті басқанда, біз абзацқа да, абзац жоқ жерге, яғни тікелей div-ге де тікелей соғуымыз мүмкін.

Бұл ретте басу оқиғасын өңдегішінде this әрқашан өңдегіш орнатылған элементті көрсетеді. Біздің жағдайда бұл біздің div:

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

Алайда, біз нақты оқиға болған тегті ала аламыз. Бun үшін event.target-те не бар екенін көре аламыз:

div.addEventListener('click', function(event) {
	console.log(event.target); // не div, не абзац
});

Осы екі нұсқаны шарттар арқылы ажыратуға болады:

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

div.addEventListener('click', function(event) {
	if (event.target.tagName === 'DIV') {
		console.log('нақты div-ге басу');
	}
	if (event.target.tagName === 'P') {
		console.log('нақты абзацқа басу');
	}
});

tagName орнына matches қолдануға болады:

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

div.addEventListener('click', function(event) {
	if (event.target.matches('div')) {
		console.log('нақты div-ге басу');
	}
	if (event.target.matches('p')) {
		console.log('нақты абзацқа басу');
	}
});

Мына элементтер берілген:

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

Div-те басу оқиғасын өңдегішін орнатыңыз. Бұл өңдегіште қай тегте оқиға орын алғанын анықтаңыз.

Алдыңғы тапсырманы өзгертіңіз. li-ге басқанда, оның соңына леп сәйкес қойылып, ал ul-ге басқанда консольде бұл туралы ақпарат шығарылуы үшін жасаңыз.