What is the difference between calling addEventListener() vs. adding the event + function into the HTML tag

Question

What is the difference between using addEventListener() in your Javascript code like this example:

Array.from(document.querySelectorAll('.element')).forEach(el => {
    el.addEventListener('ondrop', drop);
});

And calling the function directly in a HTML Tag?

<div class="element" ondrop="drop(event)"></div>
<div class="element" ondrop="drop(event)"></div>
<div class="element" ondrop="drop(event)"></div>

I'm not sure there is one aside from the obvious syntax, and timings around when the event is actually added. — Richard Barker, Feb 26 '21 at 17:18

score 2 · Accepted Answer · answered Feb 26 '21 at 17:19

2

addEventListener can add multiple events, whereas with onclick this cannot be done.
onclick can be added as an HTML attribute, whereas an addEventListener can only be added within <script> elements.
addEventListener can take a third argument that can stop the event propagation.

Both can be used to handle events. However, addEventListener should be the preferred choice since it can do everything onclick does and more. Don't use inline onclick as HTML attributes as this mixes up the javascript and the HTML which is a bad practice. It makes the code less maintainable.

answered Feb 26 '21 at 17:19

iamdhavalparmar

1,090
6
23

1

This isn't specific to onclick, but thanks! – codedude Feb 26 '21 at 17:21
1

Nowhere does this question mention onclick, but your points are still valid. – Richard Barker Feb 26 '21 at 17:21
I told `onclick` for in general – iamdhavalparmar Feb 26 '21 at 17:22

What is the difference between calling addEventListener() vs. adding the event + function into the HTML tag

1 Answers1