I am trying to use JavaScript to get a clicked element's information. 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?
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 }) 
target=span and currentTarget=null.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.
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); }); } 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` }) } 
event.target?event.targetwill give you the element that was clicked on whileevent.currentTargetwill give you the element the event was originally bound to (i.e. the div).