Events in Javascript

Asked

Viewed 65 times

2

I’m studying you and I came across the following:

const h1 = document.querySelector('h1');

  //1
  h1.addEventListener('click', () => {
    alert('Funcionou!');
  });

  //2
  h1.onclick = () => {
    alert('Funcionou!');
  };

what is the difference in the two approaches above?

javascript javascript-events

2 answers

0


The main difference is that with the onclick() you can only associate a function as callback of the event. Already with the addeventlistener() you can use as many functions as you want them to be activated when the event occurs.

Both are correct, but neither of them is "better" by itself, and there may be a reason for the developer to choose to use both approaches.

Example with the onclick (Only the second function):

let element = document.querySelector("#botao");

element.onclick = function() {
  alert("Primeira função");
}
element.onclick = function() {
  alert("Segunda função");
}
<button id="botao">Aperte</button>

Example with the addEventListenner (The first and second functions):

let element = document.querySelector("#botao");

element.addEventListener("click", function() {
  alert("Primeira função");
});

element.addEventListener("click", function() {
  alert("Segunda função");
});
<button id="botao">Apertar</button>

OBS: addeventlistener() does not work in versions prior to Internet Explorer 9. onclick() works in previous versions.

References: - Alura - Stackoverflow

  • I hope I’ve helped.
  • 1

    I did not understand the negative. The explanation is correct.

  • 1

    I don’t understand it either. But I’m learning to respect and accept people’s voting choices. That’s why I get into the question of having to justify the upvote and the downvote. But anyway, this story has already yielded.

  • Pow, vlw for the answer, explanation I was needing. It helped a lot.

  • Ball show, Paulo. May the strength be with you!

  • @Gambi this subject sucks. It’s probably a hater of yours. Imagine if he negative and leave as answer "I negative because I do not go with your face."

  • 1

    I must be awakening love in someone around here and I don’t know. Rs

  • 1

    ... but the most important thing was to help the little boy there. That’s enough for me.

Show 2 more comments

-2

I am also a student of Js and I do not have so much foundation to speak, but I believe that both do the same thing only using different resources: //1 used a lib reader and//2 used the DOM to listen to the click event.

  • 3

    Your answer has more value if you search and add references. When the basis is the achism, becomes more of an opinion than an answer. I don’t say you’re wrong, but your answer may get better.

  • I believe I made an introduction by mentioning this friend, thank you.

  • 1

    This space is unique to answers. When you have reputation points sufficient will be able to leave comments on questions and answers. Until then use this field only for answers that solve the proposed problem.

Browser other questions tagged javascript javascript-events

You are not signed in. Login or sign up in order to post.