JavaScript'теги Event объектисиндеги окуя элементи

Event объектиси окуя болгон элементи да алууга мүмкүндүк берет. Бул элемент target касиетинде жашайт. Бул элемент this'те болсо дагы, эмне үчүн керек?

Маселе şуунда, чындыгында this ар дайым окуя байланган элементти камтыйт, ал эми target касиети - чындап басылган элементти. Бул чыныгы элемент this менен дал келиши мүмкүн, же дал келбеши мүмкүн.

Келгиле, мисал менен карап көрөлү. Бизде div бар деп коёлу, ал эми анын ичинде абзац:

<div id="elem">
	<p>текст</p>
</div>

Окуяны дивге байлап коёлу, бирок абзацка басалы. Ачык-айкын, абзацка басуу бир эле учурда дивге басууну билдирет, анткени абзац биздин дивибиздин ичинде жашайт.

Сүрөттөлгөн учурда, target касиети окуя болгон акыркы тегди - башкача айтканда абзацты, дивди эмес, камтыйт деп чыгат. Муну текшерип көрөлү:

let elem = document.querySelector('#elem');

elem.addEventListener('click', function(event) {
	console.log(event.target); // биздин абзацты чыгарат
	console.log(this);         // биздин дивди чыгарат
});

Сизде li тегдери менен ul тизмеси бар деп коёлу:

ul {
	padding: 30px;
	border: 1px solid red;
}
li {
	list-style-type: none;
	margin-bottom: 20px;
	border: 1px dashed black;
}

<ul id="elem">
	<li>текст</li>
	<li>текст</li>
	<li>текст</li>
	<li>текст</li>
	<li>текст</li>
</ul>

ul тегине чыкылдатуу иштетүүчүсүн байлаңыз. Бул иштетүүчүдө tagName касиетин колдонуп, кандай тегге басылганын текшериңиз. Эгерде li тегине басылса - бул тегдин текстинин аягына үндөү белгисин кошуңуз. Ал эми эгерде ul тегине басылса - бул жөнүндө маалыматты консолго чыгарыңыз.