Which DOM Events is best

JavaScript
1

Which of the following is better way to create DOM events

  1. HTML attribute events
<html>
<body>

<p>Click the button to display the date.</p>
<button onclick="displayDate()">The time is?</button>

<script>
function displayDate() {
  document.getElementById("demo").innerHTML = Date();
}
</script>

<p id="demo"></p>

</body>
</html> 

OR
2. HTML DOM

<p>Click "Try it" to execute the displayDate() function.</p>

<button id="myBtn">Try it</button>
<p id="demo"></p>

<script>
document.getElementById("myBtn").onclick = displayDate;

function displayDate() {
  document.getElementById("demo").innerHTML = Date();
}
</script>

</body>
</html>
2

From what I learned, in-line JS is shunned upon, it is best to keep events within the script tags and avoid placing it directly in the HTML. Easy to organize code and understand why events occur instead of looking for how each and every tag is in relation to an event.

3

You’ll want to keep your JavaScript and HTML separated. In the future you will probably always have them in separate files.