Funcionalmente, creio não haver diferença nenhuma entre ambos os métodos, tanto um como outro, irá executar a função fn()
assim que esse elemento for clicado. As diferenças existentes entre os dois tipos, talvez seja mais em termos de limitações do que modo de operação.
<p onclick="fn()">click</p>
addEventListener('click', fn());
document.getElementById().onclick = fn();
Talvez devesses saber que essa forma de lidar com eventos, foi padronizada pelo Netscape ainda no DOM Level 0, para que pudessem executar eventos Javascript, e fora posteriormente adotada pelos mais variados navegadores. Só à partir do DOM Level 2 foram introduzidos novos métodos, como o addEventListener
.
As principais diferenças existentes para com o método tradicional (onclick="..."), são que vários manipuladores de eventos podem ser registrados para o mesmo evento, maior controle sobre quando o evento é acionado, e funciona com qualquer elemento DOM.
Um equívoco comum com o modelo em linha é a crença
de que ele permite que o registro de manipuladores de eventos com
argumentos personalizados. «1»
Sendo que o que realmente acontece é que o motor de JavaScript do navegador cria uma função anônima contendo as declarações existentes no atributo onclick.
Outro fato a considerar talvez seja a portabilidade que estes apresentam. Por exemplo, se quisermos mudar o nome da uma função vinculada a um evento de clique de um botão, teríamos que fazer as alterações diretamente no código HTML. Dentre estas existem ainda várias outras particularidades para cada, sendo que tanto um como outro, possuem vantagens e desvantagens em casos específicos.
Atualmente existem alguns problemas de compatibilidade para alguns dos padrões impostos pela W3C (DOM Level 3) e o IE8, por isso, alguns dos métodos podem não funcionar em certos navegadores.
Algumas Referências: