Uso do atributo onclick na tag do HTML ou do método addEventListener(click, function( ))

É melhor usar o atributo onclick no HTML ou o método addEventListener(click, função) no javascript?

1 Like

Depende do que você precisa. Mas, de qualquer forma, o onclick chama uma função. Se for uma implementação simples, é mais interessante, pois você não vai precisar armazenar nenhum dado. Se você precisa.coletar algum dado para usar no js, o listener é mais interessante.

2 Likes

Na pratica você pode fazer uma comparação com as formas de aplicar os estilos.

Em CSS:

  • Em linha dentro da tag/elemento HTML;
  • Em uma tag <style>;
  • Em um arquivo externo “.css”.

Em JavaScript:

  • Em linha dentro da tag/elemento HTML;
  • Em uma tag <script>;
  • Em um arquivo externo “.js”.

Se você tem mais de um elemento para aplicar um estilo, compensa separar o estilo em uma tag <style> e aplicar usando um seletor comum, se existem muitas regras, compensa separar em um arquivo externo.

O mesmo vale para as funções, se você tiver mais de um elemento para aplicar o mesmo evento, compensa separar o evento do elemento e escrever ele em um <script>, se o projeto esta crescendo, é melhor separar em um arquivo externo.

Gostaria de acrescentar que existem outras formar:

  • object.onclick = function(){script}; // atribui o evento para os elementos carregados junto com a página;

  • $(selector ).on(event, childSelector, data, function, map ){script} // atribui o evento para os elementos carregados junto com a página e futuros elementos que venham a ser inseridos.

Obs.: Esse ultimo exemplo é uma solução usando a biblioteca jQuery, existem outras bibliotecas que também fornecem soluções alternativas.

3 Likes

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.