How to get the element of the DOM that triggered an event?

Question

Hi everybody☺️

I need to modify the content of a <div> element which contains in its attribute 'onclick' reference to a function whose parameter is the object itself

Code:
<div onclick="addText(obj)"></div>

<script>
addText=obj=>obj.innerHTML="I'm a text!"
</script>

What do I put as an argument to refence the own <div> that generates the event?

Answer 1

I read that page, it is using this keyword in value of a HTML element attribute to refer to the element, like this:

https://code.sololearn.com/WAw7TvpXuO58/?ref=app

While this method works for onclick attribute at HTML element, since there are three ways of adding click event listener to an element (these three : https://code.sololearn.com/W0ehmlP2Y3I3/?ref=app )

Let us test whether the this keyword one by one:

https://code.sololearn.com/WBNE71U0yOiR/?ref=app

Yes, the results tell us that the this keyword can refer to the clicked element with all three methods of adding event listener.

Answer 2

good follow up question indeed.

the event parameter is automatic when a mouse event callback runs. trying to pass any argument to a mouse event callback will be overwritten by this automatic event object.

google translate of my answer:

buena pregunta de seguimiento de hecho.

el parámetro de evento es automático cuando se ejecuta una devolución de llamada de evento de mouse. intentar pasar cualquier argumento a una devolución de llamada de evento de mouse se sobrescribirá con este objeto de evento automático.

Answer 3

addText(event){
var div =event.currentTarget;
div.innerHTML="****"
}

Answer 4

Calviղ
Why? for the amount of positive votes?
Do not mark my answer for ego, I am bothered by people who come to this community or any other where the goal is to learn, to obtain a certain status. In summary, Kevin's answers and especially Gordon's answers made many things clear about the events, and in fact I thanked them.
However, read the question well and you will see that the answer in the URL that I mentioned, to whom I attribute the merits not to me, is the one that best answers the question I posed. Therefore the credit is attributed to them, not to me as you mention. I don't care if I get points or not, it doesn't come here to feed my ego, but to learn and contribute what I can to others.
I think that the answer of the mentioned URL will be the best answer to those who have exactly the same question I had when asking this question.
Gordon would like to know what you think about it, I respect you and I would greatly appreciate your judgment on this, please.

Answer 5

Oh I see,

I tested a bit

https://code.sololearn.com/WXiJc3YsYTOM/?ref=app

correction:

for addEventListener, the parameter is event object

for onclick attributes, the parameter is the argument.

sorry for wrong answer at my first attempt

Answer 6

Yoel I agree that SoloLearn experience should not be our goal. I also agree your reasoning - If the reference material is more relevant, then marking it as Best Answer is reasonable.

I haven't read that material yet. Let me go through it when I find time, and share my thoughts if any.

Calviղ Thanks for speaking up. I think it's ok, because people coming in still can read the discussions and learn from the discussions.

Answer 7

Gordon thank you! My second doubt has been resolved.
Don't worry about the translation, I put it in Spanish above because Kevin is Cuban just like me😀
🙂👍

Answer 8

Gordon don't worry, anyway in your demo code it is very clear.
Anyway I just found the best way to do what I asked before https://www.lawebdelprogramador.com/foros/JavaScript/1544871-obtener-id-de-un-elemento-clickeado.html

When I use 'this' as an argument of the function called by the attribute 'onclick', it sends precisely the object that generated the event, that is, in this case the <div>

so it would be as follows...

<div onclick="addText (this)"></div>
<script>
addText=(obj)=>obj.innerHTML="The 'this' keyword is the key😊"
</script>

Answer 9

Kevin Star gracias por el aporte 👍.
Lo que sugieres es en vez de pasar como argumento el objeto en sí, pasar el evento para poder identificar el objeto que lo ha generado. Segundo paso logrado!!
Ahora, el primer paso: como pasar ese evento como argumento en el fragmento
<div onclick=addText (qué va aquí que pase este evento??)>
O sea, sería vacío o cualquier letra? Automáticamente la función sabría que se trata del evento onclick generado por el div?
Saludos

Answer 10

Yoel set best answer to Gordon answer, not yours. 😫

Answer 11

Yoel we should never mark own answer as best answer.
The purpose of best answer should be given to the other answer that answer your question fully, and also the way to thank other for putting efforts to clear your doubts.

Answer 12

I thank you too.

This Q&A forum is a good place to learn: not only the asker learns, the answerers also learn.

The answerers research and experiment and at last they understand together.

We all learn during the process 😉

Answer 13

👍

Answer 14

Gordon thank you for your appreciation and especially for the attention given to give the best answer to my question and thus contribute to all of the community who have the same question. It is now much clearer than in the URL. Thanks from my heart.😊

Answer 15

Do you see, Calviղ? Last is the best answer. But not because it has more or less votes. But because it is the one that most evacuates the doubt for me and I am sure for the rest with the same doubt.
I apologize if I'm wrong, but I don't think that the best answer condition should be given to the most voted, but to the one that most response to the questioner, even if that answer was posted by the same person who asks as long as he attributes the merits to the person deserve, say URL, author or book, I don't believe that the best response condition should be in gratitude, for that there are comments and votes, if not the creators of the community would have put it automatically and would have taken away the possibility of choosing that condition to who asks.
My sincere greetings and respect 😉

Answer 16

Hi,
<div id="mydiv"></div>

<script>
// The best way is use JQuery
$("#mydiv").click(function() {
$("#mydiv").text("I am text")
})
</script>