Question

Why its recommended not use onclicks in your HTML.Use Event Handlers in your JS file is considered as best practice???

Answer 1

You can only have one handler with on*.

But no limits on the number of handlers you can attach to the same element for the same event when using the event registration model.

Besides, it helps consolidate all behavior within Javascript and not sprinkled throughout the codebase.

Note: you can attach events using on* inside your Javascript as well. The DOM event registration model was introduced to fix this very problem. See this example for more information:

// HTML
<p id="somePara" onclick="alert('First')">...</p>

// Javascript
var el = document.getElementById("somePara");

el.onclick = function() {
    alert("Second");
};

el.onclick = function() {
    alert("Third");
};

// when <p> is clicked, it alerts "Third", overwriting the first two handlers.

Instead, a better approach is to use the event registration. Continuing the above example (this is just for demonstration and it’s not cross-browser),

el.addEventListener("click", function() {
    alert("Un");
});


el.addEventListener("click", function() {
    alert("Dos");
});

// clicking on the <p> will now alert "Third", "Un", and "Dos".