Елемент на събитието в обекта Event в JavaScript

Обектът Event също така позволява да се получи елементът, в който се е случило събитието. Този елемент се съдържа в свойството target. Защо е необходимо това, ако този елемент се съдържа в this?

Работата е там, че всъщност this винаги съдържа елемента, към който е било привързано събитието, а свойството target - елемента, по който реално е било щракването. Този реален елемент може да съвпада с this, а може и да не съвпада.

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

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

Нека прикачим събитие към div, но щракнем върху параграфа. Очевидно е, че щракването върху параграфа представлява едновременно и щракване върху div, тъй като параграфът се съдържа в нашия div.

В описания случай ще се окаже, че свойството target ще съдържа крайния таг, в който се е случило събитието - тоест параграфа, а не 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 - изведете информация за това в конзолата.