AddEventListener vs OnClick em JavaScript
Ao criar páginas da web para um site, pode haver um requisito para colocar algumas funcionalidades adicionais para recursos aprimorados. Por exemplo, no caso de teste de automação, verifique o funcionamento de várias funcionalidades no gatilho do evento. Nesses casos, o JavaScript fornece duas técnicas importantes que ajudam a tornar um design geral de documentos acessível nomeado como método addEventListener () e evento OnClick.
Este manual será teoricamente e praticamente comparará o addEventListener e o evento OnClick.
AddEventListener vs OnClick em JavaScript
Em JavaScript, o “addEventListener ()”Método e o“ONCLICK”O evento funciona para um evento e pode executar uma função de retorno de chamada quando um botão é clicado. No entanto, eles não são completamente iguais.
O método addEventListener () inclui um evento em seu argumento. Além disso, ele pode aplicar vários manipuladores de eventos ao mesmo elemento e não substitui vários manipuladores de eventos simultaneamente. Enquanto o evento OnClick é acionado quando o usuário clica no botão correspondente no evento. É apenas uma propriedade do objeto htmlelement e pode ser substituído, ao contrário do método addEventListener ().
Sintaxe
elemento.addEventListener (evento, ouvinte, USECAPTURA);Na sintaxe dada, “evento”Refere -se ao evento especificado,“ouvinte”É a função que será invocada e“Usecapture”É o valor opcional.
Sintaxe
Html
Na sintaxe dada, “elemento”Indica o elemento com o qual o“ONCLICK”O evento será associado. Aqui, "MyScript”Refere -se à função que será chamada sobre a qual o evento OnClick ocorrerá.
JavaScript
objeto.OnClick = function () myscript;Da mesma forma, na sintaxe acima, “objeto”Refere -se ao objeto associado ao evento OnClick.
Diferenças centrais entre AddEventListener e OnClick Event
| addEventListener | ONCLICK |
| O método addEventListener só pode ser adicionado no JavaScript. | OnClick pode ser incluído no HTML, bem como em JavaScript. |
| AddEventListener não funciona nas versões mais antigas de alguns navegadores. | OnClick é compatível com todos os navegadores. |
| Esta função pode anexar vários eventos a um elemento específico. | Este evento associa apenas um único evento a um elemento. |
| Não pode vincular arquivos HTML e JavaScript. | O evento OnClick pode conectar as funcionalidades do HTML e JavaScript. |
Agora, vamos passar pelos exemplos a seguir para entender claramente a diferença declarada.
Exemplo: Método addEventListener () para detectar se a tecla específica é pressionada
Neste exemplo em particular, aplique o “documento.addEventListener ()”Método e anexe um evento chamado“keydown”Em seu argumento. Isso resultará na notificação do usuário via alerta quando o “Digitar”A tecla é pressionada:
documento.addEventListener ("keydown", (e) =>se (e.chave == "enter")
alerta ("enter a tecla está pressionada")
);
A saída correspondente será:
Exemplo: OnClick Event para alterar a cor do botão
No exemplo a seguir, criaremos um botão com o “botão" eu ia. Então, inclua um “ONCLICK”Evento que invocará a função ButtonColor () Após o botão Clique:
Agora, defina uma função chamada “cor do botao()”. Na definição da função, acesse o botão usando o “documento.geelementbyId ()”Método. Além disso, aplique o estilo.Propriedade do BackgroundColor para definir a cor do botão e atribuí -lo um código de cores RGB como seu plano de fundo:
função buttonColor ()documento.getElementById ("botão").estilo.BackgroundColor = '#911';
Saída
Exemplo: OnClick Event para alterar a cor do botão usando JavaScript
O exemplo discutido acima pode ser aplicado adicionando o “ONCLICK”Evento no código JavaScript. Para fazer isso, primeiro, crie um botão usando o “" marcação:
Agora, busque o botão criado usando o “documento.getElementById ()”Método e aplique o“ONCLICK”Evento nele. Agora, repita todas as etapas adicionais para alterar a cor do botão:
Let Button = Documento.getElementById ("botão")botão.OnClick = função ButtonColor ()
documento.getElementById ("botão").estilo.BackgroundColor = '#911';
Isso resultará na mesma saída:
Discutimos as diferenças entre AddEventListener e OnClick em JavaScript.
Conclusão
A principal diferença entre a função AddEventListener e o OnClick é que o AddEventListener pode anexar vários eventos a um único elemento HTML, enquanto o evento OnClick pode associar apenas o evento de clique com um botão com um botão. Além disso, o addEventListener só pode ser utilizado com o código JavaScript, e o OnClick Event Works nos arquivos HTML e JavaScript. Este manual orientou sobre o método addEventListener e o evento OnClick.