# Event element in an Event object in JavaScript

The `Event` object also allows you to get the element where the event occurred. This element is contained in the property `target`. Why is this necessary if this element is contained in `this`?

The fact is that in fact `this` always contains the element to which the event was attached, and the `target` property - the element that was actually clicked. This real element may or may not match `this`.

Let's look at an example. Let's say we have a `div` with a paragraph inside it:

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

Bind the event to the div, but click on the paragraph. Obviously, clicking on a paragraph is also a click on a div, since the paragraph is contained in our div.

In the described case, it turns out that the `target` property will contain the end tag in which the event happened - that is, a paragraph, not a div. Let's make sure of this:

`let elem = document.querySelector('#elem'); elem.addEventListener('click', function(event) { console.log(event.target); // will output our paragraph console.log(this); // will output our div });`

Let's say you have the list `ul` with `li` tags:

`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>`

:

Attach a click handler to the `ul` tag. In this handler, use the `tagName` property to check which tag was clicked. If the click was on the `li` tag, add an exclamation mark to the end of this tag text. And if the click was on the tag `ul` - show information about it in the console.

←→
↑
en ru