# Getting the target element when an event is bubbling in JavaScript

Let's say we have two elements: a `div` and a paragraph `p` lying inside this div:

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

Get a reference to our div into a variable:

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

Let's add some styling to our tags:

`div { padding: 20px; border: 1px solid red; } p { width: 200px; height: 200px; border: 1px solid green; }`

Now let the click handler be hung on the div:

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

Due to the fact that our div has `padding`, when we click on the div, we can hit the paragraph, and we can get to a place where this paragraph does not exist, that is, directly on the div.

At the same time, in the click handler, `this` will always point to the element on which the handler is hung. In our case this is our div:

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

However, we can get exactly the tag in which the event happened. To do this, we can see what is in `event.target`:

`div.addEventListener('click', function(event) { console.log(event.target); // or div, or paragraph });`

You can distinguish between these two options using the conditions:

`let div = document.querySelector('div'); div.addEventListener('click', function(event) { if (event.target.tagName === 'DIV') { console.log('clicks exactly on the div'); } if (event.target.tagName === 'P') { console.log('clicks exactly on the paragraph'); } });`

You can use `matches` instead of `tagName`:

`let div = document.querySelector('div'); div.addEventListener('click', function(event) { if (event.target.matches('div')) { console.log('clicks exactly on the div'); } if (event.target.matches('p')) { console.log('clicks exactly on the paragraph'); } });`

Given the following elements:

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

Attach a click handler to the div. In this handler, determine in which of the tags the event fired.

← →
↑
en ru