Ouvinte de eventos Javascript

Até agora, não muito -.. algo que acontece Nossa página web contém um botão que deve fazer algo quando o nosso botão é clicado Quando clicamos em nosso botão, nada acontece. Isso porque ainda temos que escrever nosso manipulador de eventos.

No arquivo main.js, cole o seguinte código:

Este código encontrará o elemento com o id "submit" e alterará seu conteúdo para "Formulário submetido." "Este código só será executado quando nosso submitForm() for chamado. Isso está programado para acontecer quando o usuário clica em nosso botão.

Quando clicamos em nosso botão, acontece o seguinte:

Como você pode ver, nossa mensagem parece. Usamos um gerenciador de eventos online para tornar nossa página interativa. Mas os manipuladores de eventos embutidos não são a única maneira de usar eventos em JavaScript. Vamos ver como usar a propriedade do manipulador de eventos em nosso código.

Eventos com propriedades do manipulador

Em um manipulador embutido, você precisa especificar a função que deseja executar em seu arquivo HTML . Em nosso código HTML anterior, esta linha é onde definimos a função que queríamos chamar quando nosso botão fosse pressionado:

Usando as propriedades do manipulador, podemos remover o comando do evento "onclick" do nosso código. Isso nos permite mover todo o JavaScript que torna nossa página da web interativa em seu próprio arquivo. Para este exemplo, daremos ao nosso botão o ID "button", para que possamos identificar nosso botão no código JavaScript. Removemos o evento onclick e atribuímos um identificador ao nosso botão:

Para acionar nosso evento quando o botão for pressionado, escreveremos um evento com uma propriedade handler dentro de nosso "main". js " . Aqui está o código que usaremos:

Quando você executa este código e clique no botão, a seguinte mensagem é retornada: