Como adicionar um manipulador de eventos ao objeto da janela em JavaScript
Com a ajuda do addEventListener () Método, um programador JavaScript pode adicionar Manipuladores de eventos para um objeto de janela específico. Este método permite controlar a reação para o evento correspondente. O JavaScript é isolado do texto HTML quando você utiliza o método addEventListener (), facilitando a compreensão e permitindo que você adicione ouvintes de eventos, mesmo que você não tenha controle sobre a marcação HTML.
Este artigo discutirá o procedimento para adicionar manipuladores de eventos ao objeto da janela em um programa JavaScript. Além disso, os exemplos relacionados ao uso do método addEventListener () também serão demonstrados. Então vamos começar!
Adicionando manipuladores de eventos ao objeto da janela em JavaScript
Como programador JavaScript, você pode utilizar o método addEventListener () para adicionar um ouvinte de evento a qualquer objeto HTML. Existe outro “sobrePropriedade JavaScript que é usada para o mesmo objetivo; No entanto, não é muito útil em comparação com o método addEventListener () porque o método addEventListener () permite adicionar vários ouvintes de eventos em um objeto de janela ou elemento html.
Sintaxe do método addEventListener ()
objeto.addEventListener (evento, função, usecapture);Aqui, o primeiro parâmetro, “evento”É adicionado para especificar o evento para o qual você deseja adicionar o manipulador de eventos; o segundo parâmetro, “função”Invoca a função que será executada quando o evento especificado ocorrer. O último parâmetro é opcional, que pode ser captura ou borbulhante para eventos.
Exemplo 1: Adicionando um manipulador de eventos ao objeto da janela em JavaScript
Adicionaremos o método addEventListener () ao “janela”Objeto no exemplo a seguir. O método addEventListener () adicionado será acionado quando um usuário executar o “Mousedown" Ação:
JavaScript addEventListener ()
Este exemplo usa o método addEventListener () no objeto da janela.
Também podemos passar um “evento”Objeta ao método addEventListener (). O "evento”O objeto compreende todas as informações relacionadas ao evento de Mousedown:
Execute o programa acima do seu editor de código favorito ou qualquer caixa de areia de codificação on-line; No entanto, utilizaremos o JSBIN para esse fim:
A execução do programa JavaScript acima mencionado mostrará a seguinte saída:
Agora, clique à esquerda na tela e você verá o seguinte alerta:
Exemplo 2: Adicionando um manipulador de eventos para o evento de clique no mouse em javascript
Este exemplo mostrará o procedimento de adicionar um manipulador de eventos para o mouse “cliqueEvento em JavaScript. Neste exemplo, não estamos adicionando evento diretamente ao objeto da janela, mas ao seu objeto de documento.
Em primeiro lugar, adicionaremos um título com o
tag, um parágrafo com o
tag e um botão usando a tag:
Adicione um manipulador de eventos em JavaScript
Este programa JavaScript utilizou o método addEventListener ()
Nós também adicionamos um ID “Button1" para nós "Clique em mim" botão:
O método getElementById será invocado para encontrar e obter o botão ter “Button1" eu ia. Depois disso, o “addEventListener ()”O método adicionará um“cliqueEvento que acionará o “DisplayDate ()”Método:
Depois de obter a saída, clique no “Clique em mim”Botão para conferir a hora e a data atuais:
Conclusão
Usando o método addEventListener (), você pode adicionar um manipulador de eventos ao objeto de janela e elementos html. Sem substituir os manipuladores de eventos existentes, o método JavaScript addEventListener () atribui um manipulador de eventos ao objeto específico e um único objeto de janela pode ter vários manipuladores de eventos também. Este artigo discutiu o procedimento para adicionar manipuladores de eventos ao objeto de janela em um programa JavaScript e os exemplos relacionados ao uso do método addEventListener () também são demonstrados.