What is the difference between DOM event handlers?

Question

I would like to know the difference between, for example, <p onclick="fn()">click</p>, addEventListener('click', fn()); and document.getElementById().onclick = fn();.

Is there any relationship with performance? Is there any priority difference between them? Is there a specific scenario for each one?

Answer 1

Functionally, I believe there is no difference between the two methods, either, will perform the function fn() once this element is clicked. The differences between the two types, maybe it is more in terms of limitations than mode of operation.

<p onclick="fn()">click</p>
addEventListener('click', fn()); 
document.getElementById().onclick = fn();

Perhaps you should know that this way of dealing with events was standardized by Netscape still in the DOM Level 0, so that they could perform events Javascript, and was subsequently adopted by the most varied browsers. Only from the DOM Level 2 new methods have been introduced, such as addEventListener.

The main differences with the traditional method (onclick="..."), are that multiple event handlers can be registered for the same event, greater control over when the event is triggered, and works with any DOM element.

A common misconception with the online model is belief that it allows the registration of event handlers with custom arguments. «1»

Since what really happens is that the browser’s Javascript engine creates an anonymous function containing the existing statements in the onclick attribute.

Another fact to consider is perhaps the portability they present. For example, if we want to change the name of a function linked to a button click event, we would have to make the changes directly in the code HTML. Among these there are several other particularities for each, and both have advantages and disadvantages in specific cases.

There are currently some compatibility problems for some of the standards imposed by W3C (DOM Level 3) and IE8, so some of the methods may not work in certain browsers.

Some References:

• Eventtarget
• DOM (IE . spec)
• Introevents
• Overview Oenh
• HTML DOM
• DOM Events

Answer 2

The @Edilson response has a theoretical approach, I will try to explain in practice the differences.

Add event handlers (Event handlers) with html attribute or with the estates .on* has the following characteristics::

• only one handler per event and element can be assigned
• to remove a handler simply set the property to null or false

The attribution by the HTML attribute has the following characteristics in addition to those described above:

• goes against the practice of separation of concepts (Separation of Concerns - Soc), which aims to separate display (HTML) and behavior (javascript)
• does not accept anonymous functions (except self executing Anonymous Function)
• the object event will be accessible, just as it is with this, because when using the attribute onclick="exemplo();" the property .onclick element will have the value:

function onclick(event) {
  exemplo();
}

---

Register an event hold (Event Listener) with addEventListener() has the following characteristics::

• it is possible to register more than one Listener by event and element
• the removal of listeners is done by function removeEventListener()
• remove listeners of Anonimas functions is only possible from within the function itself using arguments.callee as a reference

---

There is no priority of execution by one of the methods, the functions will be executed in the order that have been added.

On performance, I consider the difference to be irrelevant.

Answer 3

Complementing the responses of the boys and to help people who want to see the difference in execution, I will leave two practical examples that shows the difference between the onclick() and the addEventListenner().

Note that in the onclick() the function is executed only once. No addEventListenner() the two functions are carried out.

Onclicked()

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

element.onclick = function() {
  alert("Primeira função");
}
element.onclick = function() {
  alert("Segunda função");
}

<button id="botao">Apertar</button>

With addEventListenner()

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

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

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

<button id="botao">Aperte</button>