Existem casos em que você precisa usar o atributo de evento inline / vinculação antecipada em HTML / JavaScript

Question

Em minha resposta à seguinte pergunta do SO: O que significa associação de evento? , fiz uma observação passageira de que oo uso de inline-JavaScript / Early-Binding para vincular eventos JavaScript era 'muitas vezes mal orientado'

Por exemplo:

<input id="MyButton" type="button" value="clickme" onlick="Somefunction()" />

Eu estava defendendo a abordagem de 'ligação tardia', em que não há JavaScript referenciado na marcação, que eu entendo ser uma prática recomendada estabelecida.No entanto, os comentaristas afirmaram que houve ocasiões que exigiram seu uso e eu me perguntei quais seriam essas ocasiões.

Sem se envolver em uma discussão sobre os méritos relativos de qualquer um deles, alguém pode pensar em quaisquer circunstâncias que determinem que você use o atributo onclick em vez de uma abordagem de ligação tardia.

Muito obrigado

Answer 1

Acho que muitos desenvolvedores farão isso por ignorância ou falta de conhecimento (o que é, claro, comum) e os desenvolvedores restantes farão isso porque é simplesmente mais conveniente usar atributos HTML-JS do que vinculação tardia, se você sabe que certos objetos e funções são sempre carregados em todas as páginas e eles simplesmente 'estarão lá'.

Acho que isso é especialmente verdadeiro quando o referido HTML vem de um retorno de chamada AJAX. Veja um exemplo em que uma solicitação AJAX retorna com uma resposta HTML e esse HTML é inserido na página. Agora, o desenvolvedor ingênuo pensaria assim:

• Não tenho ideia de quais elementos estão dentro desse HTML de resposta, então não sei quais vínculos atrasados ​​preciso adicionar.
• Talvez eu precise adicioná-los todos por precaução! Ou escreva algum script de análise que detecte elementos e se vincule aos que encontrar?
• Mas e se eu precisar me vincular a algo que ainda não existe? É hora de escrever um longo JavaScript embutido!

Tudo isso pode ser eliminado usando um tipo de ligação onipresente que se aplica a todos os elementos e futuros atuais da página. Em jQuery, o equivalente é live() . Em vez de escrever:

$('.foo').click(function(){...});

Você poderia escrever:

$('.foo').live('click', function(){...});

Agora, todos os elementos com o nome de classe 'foo' irão executar a função quando clicados, incluindo elementos que não existem atualmente . Muito útil para interfaces dinâmicas AJAX.

Você já deve saber disso, mas estou apenas apontando que qualquer coisa que os atributos JS podem fazer, o JS puro pode fazer melhor, e eu consideraria essa prática recomendada.

Answer 2

comentadores afirmaram que houve ocasiões que exigiram seu uso

Acho que sou um desses comentaristas. O que eu realmente disse foi que os ouvintes inline " são uma opção razoável em certas circunstâncias ". Não acho que haja nenhum caso em que seja "necessário" (o que, neste contexto, entendo como sendo obrigatório).

Adicionar ouvintes embutidos é simplesmente aplicar a mesma lógica no servidor para adicionar ouvintes que seria aplicada no cliente e tem as vantagens de:

1. A marcação pode ser criada e armazenada em cache ou usada como páginas estáticas, os ouvintes não são adicionados por cada cliente repetidamente quando as páginas são baixadas
2. Problemas relacionados ao atraso entre o elemento estar disponível e o ouvinte sendo adicionado por DOMReady ou funções onload ou "scripts inferiores" foram completamente removidos
3. Os caprichos de várias funções DOMReady "cross-browser" com onload fallback foram removidos - não há oportunidade para essas funções falharem em adicionar ouvintes se eles não forem usados ​​

Claro, isso não significa que todos os ouvintes devam ser adicionados in-line e que a adição dinâmica de ouvintes é uma porcaria, estou apenas salientando que é um método viável que resolve certos problemas e é uma solução perfeitamente razoável em muitos casos.

Se você acredita que a "vinculação antecipada" de ouvintes é boa, faça-a o mais cedo possível - coloque-os embutidos. :-)

PS. Também acho que disse que não gosto do uso de "vinculação" neste contexto, pois os ouvintes não estão presos aos elementos em nenhum sentido real. Eles são simplesmente funções que são chamadas quando um elemento recebe um evento relacionado. O único tipo de ligação é que esta palavra-chave do ouvinte pode ser definida para fazer referência ao elemento relacionado (que é consistente em todos os navegadores para ouvintes embutidos, mas não necessariamente para aqueles adicionados posteriormente).

Answer 3

Razões pelas quais os atributos onclick são ruins:

onclick="foo()"

• Sua passagem em uma string de código que é avaliada em tempo de execução quando o elemento é clicado.Isso é ineficiente e usa os horrores de eval
• Você é forçado a armazenar a função foo no escopo global, poluindo assim o escopo global com toda a sua lógica de tratamento de eventos.