Um evento é uma parte importante de .Uma página da web responde de acordo com um evento ocorrido. Alguns eventos são gerados pelo usuário e alguns são gerados por APIs. Neste artigo, veremos como os eventos ocorrem e como o método addEventListener em JavaScript é usado na seguinte sequência:
- O que é Event Listener?
- AddEventListener () em JavaScript
- Valores de Parâmetro
- AddEventListener em JavaScript: Exemplo
O que é Event Listener?
Um ouvinte de evento é um procedimento em JavaScript que aguarda a ocorrência de um evento. O exemplo simples de um evento é um usuário clicando com o mouse ou pressionando uma tecla no teclado.
o addEventListener () é um embutido Função JavaScript que leva o evento para ouvir e um segundo argumento a ser chamado sempre que o evento descrito for acionado. Qualquer número de manipuladores de eventos pode ser adicionado a um único elemento sem sobrescrever os manipuladores de eventos existentes.
addEventListener () em JavaScript
Alguns dos recursos do método de ouvinte de evento incluem:
- o addEventListener () método anexa um manipulador de eventos para o elemento especificado.
- Este método anexa um manipulador de eventos a um elemento sem sobrescrevendo manipuladores de eventos existentes.
- Você pode adicionar muitos manipuladores de eventos para um elemento.
- Você pode adicionar muitos manipuladores de eventos do mesmo tipo para um elemento , ou seja, dois eventos de 'clique'.
- Ouvintes de eventos podem ser adicionados a qualquer JULGAMENTO objeto não apenas elementos HTML. ou seja, o objeto da janela.
- O método addEventListener () o torna Mais fácil para controlar como o evento reage a borbulhar.
Ao usar o método addEventListener (), o JavaScript é separado do marcação, para melhor legibilidade e permite adicionar ouvintes de eventos mesmo quando você não controla a marcação HTML.
Além disso, você pode remover facilmente um ouvinte de evento usando o método removeEventListener () .
Sintaxe:
target.addEventListener (type, listener [, options]) target.addEventListener (type, listener [, useCapture]) target.addEventListener (type, listener [, useCapture, WantsUntrusted])
Valores de Parâmetro
| Parâmetro | Descrição |
evento | Requeridos. Uma String que especifica o nome do evento. Nota: Não use o prefixo “on”. Por exemplo, use “click” em vez de “onclick”. Para obter uma lista de todos os eventos HTML DOM, consulte nossa Referência de objeto de evento HTML DOM completa. |
função | Requeridos. Especifica a função a ser executada quando o evento ocorre. Quando o evento ocorre, um objeto de evento é passado para a função como o primeiro parâmetro. O tipo de evento objeto depende do evento especificado. Por exemplo, o evento “click” pertence ao objeto MouseEvent. |
useCapture | Opcional. Um valor booleano que especifica se o evento deve ser executado na fase de captura ou bolha. Valores possíveis: true - O manipulador de eventos é executado na captura phasefalse- Default. O manipulador de eventos é executado na fase de bolha |
Agora que você sabe como funciona um ouvinte de evento, vamos dar uma olhada em um exemplo de addEventListener () em JavaScript.
é um mestrado considerado pós-graduação
addEventListener () em JavaScript: Exemplo
& lt! DOCTYPE html & gt & lthtml & gt & ltbody & gt & ltp & gtEste exemplo usa o método addEventListener () para executar uma função quando um usuário clica em um botão. & lt / p & gt & ltbutton id = 'myBtn' & gtpcript & ltBcript & ltEcript & ltpcript & ltEcript & ltpcript & gtpcript & ltEcript & lt / botão de teste ('myBtn'). addEventListener ('click', myFunction) function myFunction () {document.getElementById ('demo'). innerHTML = 'Hello World'} & lt / script & gt & lt / body & gt & lt / html & gt 
Com isso, chegamos ao fim deste addEventListener em JavaScript. Espero que você tenha entendido como o ouvinte de eventos método funciona em JavaScript.
Confira nosso que vem com treinamento ao vivo conduzido por instrutor e experiência em projetos da vida real. Este treinamento o torna proficiente em habilidades para trabalhar com tecnologias da web de back-end e front-end. Inclui treinamento em Desenvolvimento Web, jQuery, Angular, NodeJS, ExpressJS e MongoDB.
Tem alguma questão para nós? Mencione isso na seção de comentários do blog “addEventListener em JavaScript” e entraremos em contato com você.