Cette distinction est faite uniquement pour garantir la bonne lisibilité de code pour utilisateurs(ou développeur web),
et non pour la raison de vitesse de chargement ?

A votre avis,mon code n'est pas professionnel ? Et si vous privilégiez
la fonction click() de jquery,pourquoi ?

Je vois 3 raisons de ne pas utiliser onclick :

1. Il est plus propre de mettre l'intégralité de ton code Javascript dans des fichiers externes que tu inclus ensuite, ainsi les utilisateurs qui ne lisent pas Javascript ne sont pas encombrés pour rien.

2. Le HTML est là pour le sémantique, tout ce qui appartient à la logique doit se trouver ailleurs et non pas dans les balises. C'est la même chose pour la balise "style" par exemple, on ne devrait jamais l'utiliser et uniquement utiliser des classes CSS. La balise style n'est là que pour se simplifier la vie, au détriment des bonnes pratiques.

3. Si tu veux appliquer ta fonction sur d'autres éléments, tu seras obligé de dupliquer autant de fois cette balise partout dans ton code. Et si tu décides par la suite qu'en fait il faudrait utiliser 2 fonctions plutôt qu'une seule, tu devras le modifier partout.

A votre avis,mon code n'est pas professionnel ? Et si vous privilégiez
la fonction click() de jquery,pourquoi ?

$('#handle').click(function(e){
}

function iti(){
$("#cache").animate({
width: '500px',
height: '200px',
border: '1px solid red',
backgroundColor: '#ffffff'
});
}
.....

<input type="button" onclick="iti()" />