javascript - What is the difference between HTML Event Attributes and Assign Events Using the HTML DOM?

Question

HTML Event Attributes:

<button onclick="displayDate()">Try it</button>

Assign Events Using the HTML DOM:

<script>

document.getElementById("myBtn").onclick = function(){ displayDate() };

</script>

What is the difference between these two ? Any advantages in using (Assign Events Using the HTML DOM) ?

Thanks

Answer 1

There are very big differences.

Event handlers that are set up via HTML event attributes were the first way we did event handling - - before there was a DOM. This way of setting up events became known as DOM Level 0 (as in, the de facto standard before there was a standard). When this was the way to do it (circa 1995), it was fine, because we had no other choice. But, the way the attribute value was turned into event handling code was handled like this:

The HTML element has an event attribute declared on it and that attribute has a value that is the JavaScript code that should be executed when the event occurs:

<input type="button" onclick="alert('You clicked me!')" value="Click me">