Un bouton reçoit successivement ces quatre instructions

const b = document.getElementById("go");
b.onclick = function () { console.log("A"); };
b.onclick = function () { console.log("B"); };
b.addEventListener("click", function () { console.log("C"); });
b.addEventListener("click", function () { console.log("D"); });

La console affiche B, puis C, puis D. La lettre A n'apparaît jamais.

Pourquoi. b.onclick est une propriété : lui affecter une fonction écrase la précédente, exactement comme x = 1 puis x = 2 ne laisse que $2$. La ligne 3 a donc effacé la ligne 2. addEventListener ajoute un écouteur à une liste : les deux coexistent, et sont appelés dans l'ordre où ils ont été ajoutés.

L'ordre B, C, D suit l'ordre d'installation : le gestionnaire onclick a été posé en premier, il s'exécute en premier.

Ce qu'il faut en conclure. addEventListener est la bonne pratique, pour une raison qui n'est pas de style : elle permet à plusieurs morceaux de code, écrits par des personnes différentes, de réagir au même événement sans se détruire. Avec onclick, le dernier script chargé gagne — et le défaut est invisible, puisque le code effacé est syntaxiquement irréprochable.

Corollaire : b.onclick = null; supprime le gestionnaire, alors qu'il faut b.removeEventListener("click", f) pour retirer un écouteur — et donc que la fonction ait un nom. Un écouteur installé sous forme de fonction anonyme, comme ici, ne peut plus être retiré.