Ao clicar em Javascript

Michael Zippo

O evento onclick JavaScript executa uma função quando um usuário clica em um botão ou outro elemento da web. Esse método é usado tanto inline em um documento HTML quanto em um documento JavaScript.

Ao codificar em JavaScript, é comum querer executar o código quando um usuário interage com a página da web. Por exemplo, você pode querer que algo aconteça quando um usuário pressiona um botão. Mas como em JavaScript?

Você implementa essa funcionalidade

Aqui é onde o evento "onclick()" pode ser útil. O evento onclick é um dos tipos de evento mais usados. onclick permite que você execute código quando um usuário clica em um botão ou outro elemento em sua página da web.

Neste breve guia, explicaremos como o recurso onclick funciona. Veremos como você pode usar onclick em seu código para tornar um site interativo.

Atualizar eventos

Onclick é um tipo de evento JavaScript. Eventos são ações que ocorrem no navegador e podem ser iniciadas pelo usuário ou pelo próprio navegador. Um usuário clicando em um botão, enviando um formulário ou pressionando uma tecla no teclado são exemplos de eventos em ação. Neste tutorial, focaremos no primeiro: um usuário clicando em um item.

Usando eventos, os desenvolvedores podem tornar uma página da Web interativa. Você pode tornar um formulário visível quando o usuário clicar em um botão ou exibir uma mensagem para um usuário quando ele enviar um formulário.

Existem dois componentes principais de eventos: manipuladores de eventos e ouvintes de eventos.

Quando você clica em um botão, pressiona uma tecla ou passa o mouse sobre um item, um evento é executado. O manipulador de eventos é o código que é executado quando o evento é iniciado. Por exemplo, quando você clica em um botão, o manipulador de eventos é executado.

O evento para ouvintes faz parte de um freixo e md ; item como um botão - ele "escuta" e espera até que você interaja com ele. Em seguida, o ouvinte executa o manipulador de eventos.

JavaScript onclick

O evento JavaScript executa uma função quando você clica em um botão ou outro elemento da web. Por exemplo, um evento onclick pode fazer com que uma caixa de diálogo apareça quando você carimbar um botão.

Aqui está a sintaxe do método onclick em HTML:

Ao clicar neste botão HTML, a função JavaScript "codetorun" será executada. Podemos usar onclick com outros elementos, como uma div. onclick não é exclusivo para botões.

Você também pode usar onclick em JavaScript simples. Aqui está um exemplo de um método onclick JavaScript:

Usamos o método JavaScript getElementById para recuperar um elemento da nossa página web. Quando clicamos no elemento com o id "button" nossa função onclick será executada.

Exemplo JavaScript de botão onclick

Suponha que você queira modificar um texto em uma página web após clicando em um elemento ou um parágrafo. Podemos usar o atributo onclick para implementar essa funcionalidade em um site. Vamos começar com uma página HTML com um botão e algum texto. Também criaremos um arquivo JavaScript que conterá nosso código de evento.

Este é um exemplo de uma página da Web básica, mas ainda não é interativa. Quando esta página for executada, veremos um botão e algum texto, mas nada acontecerá quando clicarmos em nosso botão. Isso ocorre porque ainda não implementamos a função de script onclick.

Agora que nossa página da web está pronta, nós podemos começar a criar nosso evento onclick. Primeiro, precisamos adicionar o ouvinte do evento onclick() ao nosso botão. Este evento ouvirá quando o usuário clicar no botão.

Vamos criar nosso arquivo "onclick.js", que conterá o código do nosso evento changeParagraph(). Este evento alterará o texto do nosso parágrafo (o elemento "p") para outra coisa.

Definimos uma função JavaScript chamada changeParagraph. Usamos o método querySelector JavaScript para selecionar um parágrafo em nossa página. Quando carregarmos a página pela primeira vez, veremos nosso botão e o texto que diz: "Este texto mudará quando você clicar no botão".

Depois de clicar no botão, nossa página da Web muda e mostra nossa novo texto:

SES9UW5H18rpOrMBgZl2G0rKN LrvhzufnH5bMpX7pd yKpLocGpIBvv9FgaeNxPpoFbLQuJKYqi4cIrWOAGWYrOnN96AJ655kefwbfkk1gCClwg P9I9fQ9G8EQnDUzJw

Para obter mais recursos para aprender JavaScript, consulte nosso Guia de aprendizagem de JavaScript .

Ao clicar em Javascript

Atualizar eventos

JavaScript onclick

Exemplo JavaScript de botão onclick

Resumo