Skip to main content
adicionou 865 caracteres ao conteúdo
Fonte Link
Mateus Veloso
  • 1,9mil
  • 9
  • 27

É permitido utilizar JavaScript para alterar o comportamento natural de um elemento para agir como outro?

Sim, a partir do momento que temos como parar a propagação e cancelar um determinado evento (caso seja cancelável, sem parar a propagação do mesmo )

event.stopPropagation();

event.preventDefault();

Nós da o poder de modificar o que aquele elemento vai fazer, posso dizer que um input do tipo text vai se comportar como um botão que ao receber um evento de click por exemplo cancele seu evento de focus e acione um click.


Qual é o impacto gerado por esta abordagem? Existe uma diferença de desempenho na renderização da página? E como isso pode afetar a usabilidade?

Isso pode afetar de diversas maneiras e dependendo do teu código, do browser, de sua conexão com a internet...

Você pode evitar utilizar arquivos externos .js do contrario você depende de sua conexão da internet para que seu script funcione e "modifique o elemento"

A diferença de desempenho não vai ser notável porem existe, se você não impedir o fluxo do elemento o teu navegador já vai saber como tratar o mesmo, no momento que você começa a impedir funções nativas, parar eventos, modificar eventos, tudo isso vai ter um custo pra sua aplicação, parando para analisar melhor pense da seguinte maneira, você tem um check que quando receber um click ele vai marcar a si mesmo e desmarcar outro elemento logo você vai fazer uma alteração a mais no teu DOM e isso vai sim ter seu custo.

Dependendo da sua script ela vai atrapalhar no carregamento da página sim, logo 'modificar impacta no carregamento da página.'

Um exemplo básico para demonstrar o que pode acontecer caso sua script se atrase e alguém click em seu check. :

setTimeout(function(){
  jQuery('input').click(function(){
    return false;
  });
},3000)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox">

No exemplo acima você pode clicar no checkbox até 3 segundos após o código javascript, após isso eu retorno false no evento de click desativando assim o seu evento de marcar ou não o checkbox, isso é um exemplo que pode acontecer caso seu script demore para carregar e alguem click em seu 'checkbox' que deveria funcionar como radio button.


Se a usabilidade for diretamente afetada, é possível corrigir utilizando o atributo role="checkbox"?

Esse atributo serve para dar mais semântica aos elementos de documentos baseados em marcação, não acho que seria correto utiliza-lo no caso

É permitido utilizar JavaScript para alterar o comportamento natural de um elemento para agir como outro?

Sim, a partir do momento que temos como parar a propagação e cancelar um determinado evento (caso seja cancelável, sem parar a propagação do mesmo )

event.stopPropagation();

event.preventDefault();

Nós da o poder de modificar o que aquele elemento vai fazer, posso dizer que um input do tipo text vai se comportar como um botão que ao receber um evento de click por exemplo cancele seu evento de focus e acione um click.


Qual é o impacto gerado por esta abordagem? Existe uma diferença de desempenho na renderização da página? E como isso pode afetar a usabilidade?

Isso pode afetar de diversas maneiras e dependendo do teu código, do browser, de sua conexão com a internet...

Um exemplo básico para demonstrar o que pode acontecer :

setTimeout(function(){
  jQuery('input').click(function(){
    return false;
  });
},3000)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox">

No exemplo acima você pode clicar no checkbox até 3 segundos após o código javascript, após isso eu retorno false no evento de click desativando assim o seu evento de marcar ou não o checkbox, isso é um exemplo que pode acontecer caso seu script demore para carregar e alguem click em seu 'checkbox' que deveria funcionar como radio button.


Se a usabilidade for diretamente afetada, é possível corrigir utilizando o atributo role="checkbox"?

Esse atributo serve para dar mais semântica aos elementos de documentos baseados em marcação, não acho que seria correto utiliza-lo no caso

É permitido utilizar JavaScript para alterar o comportamento natural de um elemento para agir como outro?

Sim, a partir do momento que temos como parar a propagação e cancelar um determinado evento (caso seja cancelável, sem parar a propagação do mesmo )

event.stopPropagation();

event.preventDefault();

Nós da o poder de modificar o que aquele elemento vai fazer, posso dizer que um input do tipo text vai se comportar como um botão que ao receber um evento de click por exemplo cancele seu evento de focus e acione um click.


Qual é o impacto gerado por esta abordagem? Existe uma diferença de desempenho na renderização da página? E como isso pode afetar a usabilidade?

Isso pode afetar de diversas maneiras dependendo do teu código, do browser, de sua conexão com a internet...

Você pode evitar utilizar arquivos externos .js do contrario você depende de sua conexão da internet para que seu script funcione e "modifique o elemento"

A diferença de desempenho não vai ser notável porem existe, se você não impedir o fluxo do elemento o teu navegador já vai saber como tratar o mesmo, no momento que você começa a impedir funções nativas, parar eventos, modificar eventos, tudo isso vai ter um custo pra sua aplicação, parando para analisar melhor pense da seguinte maneira, você tem um check que quando receber um click ele vai marcar a si mesmo e desmarcar outro elemento logo você vai fazer uma alteração a mais no teu DOM e isso vai sim ter seu custo.

Dependendo da sua script ela vai atrapalhar no carregamento da página sim, logo 'modificar impacta no carregamento da página.'

Um exemplo básico para demonstrar o que pode acontecer caso sua script se atrase e alguém click em seu check. :

setTimeout(function(){
  jQuery('input').click(function(){
    return false;
  });
},3000)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox">

No exemplo acima você pode clicar no checkbox até 3 segundos após o código javascript, após isso eu retorno false no evento de click desativando assim o seu evento de marcar ou não o checkbox, isso é um exemplo que pode acontecer caso seu script demore para carregar e alguem click em seu 'checkbox' que deveria funcionar como radio button.


Se a usabilidade for diretamente afetada, é possível corrigir utilizando o atributo role="checkbox"?

Esse atributo serve para dar mais semântica aos elementos de documentos baseados em marcação, não acho que seria correto utiliza-lo no caso

Fonte Link
Mateus Veloso
  • 1,9mil
  • 9
  • 27

É permitido utilizar JavaScript para alterar o comportamento natural de um elemento para agir como outro?

Sim, a partir do momento que temos como parar a propagação e cancelar um determinado evento (caso seja cancelável, sem parar a propagação do mesmo )

event.stopPropagation();

event.preventDefault();

Nós da o poder de modificar o que aquele elemento vai fazer, posso dizer que um input do tipo text vai se comportar como um botão que ao receber um evento de click por exemplo cancele seu evento de focus e acione um click.


Qual é o impacto gerado por esta abordagem? Existe uma diferença de desempenho na renderização da página? E como isso pode afetar a usabilidade?

Isso pode afetar de diversas maneiras e dependendo do teu código, do browser, de sua conexão com a internet...

Um exemplo básico para demonstrar o que pode acontecer :

setTimeout(function(){
  jQuery('input').click(function(){
    return false;
  });
},3000)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox">

No exemplo acima você pode clicar no checkbox até 3 segundos após o código javascript, após isso eu retorno false no evento de click desativando assim o seu evento de marcar ou não o checkbox, isso é um exemplo que pode acontecer caso seu script demore para carregar e alguem click em seu 'checkbox' que deveria funcionar como radio button.


Se a usabilidade for diretamente afetada, é possível corrigir utilizando o atributo role="checkbox"?

Esse atributo serve para dar mais semântica aos elementos de documentos baseados em marcação, não acho que seria correto utiliza-lo no caso