Настан елемент во објектот Event во JavaScript

Објектот Event исто така овозможува да се добие елементот во кој се случил настанот. Овој елемент се содржи во својството target. Зошто ова е потребно, ако овој елемент се содржи во this?

Работата е во тоа што всушност this секогаш го содржи елементот, на кој му бил врзан настанот, додека својството target го содржи елементот на кој реално бил кликот. Овој реален елемент може да се совпаѓа со this, а може и да не се совпаѓа.

Да погледнеме на пример. Нека имаме div, а внутри него параграф:

<div id="elem">
	<p>text</p>
</div>

Да го врземе настанот на div-от, но да кликнеме на параграфот. Очигледно е дека кликот на параграфот претставува истовремено и клик на div-от, бидејќи параграфот се наоѓа во нашиот div.

Во опишаниот случај ќе испадне дека својството target ќе го содржи крајниот таг, во кој се случил настанот - односно параграфот, a не div-от. Да се увериме во ова:

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

elem.addEventListener('click', function(event) {
	console.log(event.target); // ќе го испечати нашиот параграф
	console.log(this);         // ќе го испечати нашиот div
});

Нека имате список ul со тагови li:

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

<ul id="elem">
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

Врзете го на тагот ul обработувачот за клик. Во овој обработувач проверете со помош на својството tagName, на кој таг бил кликот. Ако кликот бил на тагот li - додајте на крајот од текстот на овој таг извичник. А ако кликот бил на тагот ul - испечатете информација за ова во конзолата.