5

I am trying to use JavaScript to get a clicked element's information.

Here is the jsFiddle.

And below is my code.

let div = document.querySelector('div')
div.addEventListener('click', function(event) {
  // how to get the clicked p tag here?
  // this?
  // event.target.currentTarget?
})
<div>
  <p>text 1</p>
  <p>text 2</p>
</div>

How can I use this to get the element's information?

Answer: event.target Thanks Juan Mendes

Matt Croak
  • 2,788
  • 2
  • 17
  • 35
baDrosa82
  • 117
  • 1
  • 2
  • 7
  • 3
    What's the problem? Did you try `event.target`? – Ruan Mendes Nov 26 '19 at 15:46
  • If you really want to only get the p-tags, I'd suggest not to add the eventlistener to the parent but to the p tags directly. Otherwise you could also receive child elements like or tags as targets. – dome2k Nov 26 '19 at 15:47
  • 1
    `event.target` will give you the element that was clicked on while `event.currentTarget` will give you the element the event was originally bound to (i.e. the div). – Ted Whitehead Nov 26 '19 at 15:48
  • @JuanMendes no I didn't lol, thanks a lot. – baDrosa82 Nov 26 '19 at 15:50
  • Does this answer your question? [How to get the element clicked (for the whole document)?](https://stackoverflow.com/questions/9012537/how-to-get-the-element-clicked-for-the-whole-document) – matvs Nov 26 '19 at 15:50

4 Answers4

7

e.target should give you the exact element that was clicked to generate the event.

e.currentTarget will give you the element that the event is at when the function was called (after bubbling up from the e.target)

div.addEventListener('click', (e) => {
console.log(e.target) // the p that was clicked
console.log(e.currentTarget) // this div
})
mihai
  • 4,592
  • 3
  • 29
  • 42
itamar
  • 3,837
  • 5
  • 35
  • 60
  • 1
    What if the currentTarget is null? I have simillar situatuation with button, which has an event attached and nested span. After click at span I've get `target=span` and `currentTarget=null`. – Bartosz Rosa Jan 04 '23 at 19:37
1

As I wrote in my comment event.target should be fine. But you should be careful if you really only want the p-tags. If you use a-tags or other child elements in the wrapping div you could potentially also receive other tags.

I'd suggest to actually add the event listener to the p-tags directly.

dome2k
  • 767
  • 6
  • 13
0

Probably best to attach the event listener to each of the p elements in case you have other children elements nested within the p element itself.

const paragraphs = document.querySelectorAll("div > p");

for (let i = 0; i < paragraphs.length; i += 1) {
  paragraphs[i].addEventListener("click", function (event) {
        console.log(event.currentTarget);
  });
}
dw_
  • 1,707
  • 1
  • 7
  • 13
  • As long as they're all under the `div` you could catch the event in the `div` and then use `event.target` to get the p tag that was clicked. – itamar Nov 26 '19 at 15:52
  • 1
    Yes, if there are no other descendants of the `p` elements. – dw_ Nov 26 '19 at 16:00
0

If you use event.target you should get the specific p tag that you clicked.

However, if you really want to use this, you're better off attaching the onclick event handler to the p tags themselves rather than the parent.

Like so.

let ps = document.getElementsByTagName('p')

for (var i = 0; i < ps.length; ++i){
    ps[i].addEventListener('click', function(event){
        // how to get the clicked p tag here?
        alert(this.innerText) //or whatever action you want to do with `this`
   })
}
Matt Croak
  • 2,788
  • 2
  • 17
  • 35