Método do ouvinte de eventos DOM em JavaScript

Você pode adicionar o ouvinte do evento aos elementos html dom com a ajuda do addEventListener () método. O método addEventListener () 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 adicionar ouvintes de eventos, mesmo que você não controla a marcação HTML.

Este artigo discutirá o DOM Event Listener Método em JavaScript. Explicaremos o uso do método do ouvinte de eventos DOM para adicionar manipuladores únicos e múltiplos aos elementos HTML. Além disso, exemplos relacionados à borbulha e captura de eventos também serão demonstrados. Então vamos começar!

Método do ouvinte de eventos DOM em JavaScript

Como um programador JavaScript, você pode utilizar o método DOM addEventListener () para adicionar um ouvinte de evento em qualquer objeto HTM, como os objetos da janela, elementos html, documento html ou o objeto xmlhttprequest.

Existe outro "sobre" Propriedade JavaScript que é usada para a mesma finalidade; No entanto, não é muito útil em comparação com o método addEventListener () porque o método DOM 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 terceiro parâmetro é opcional; onde você tem que adicionar“Captura de eventos” ou “Evento borbulhando”.

Exemplo 1: Usando o método do ouvinte DOM Efeer para adicionar um manipulador de eventos em javascript

Este exemplo mostrará o procedimento de adicionar um método de ouvinte de evento DOM para o evento "clique" do mouse em javascript. Em primeiro lugar, adicionaremos um título com o

tag, um parágrafo com o

tag e um botão usando a tag:

Método do ouvinte de eventos DOM 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:

Clique em mim

O método getElementById será invocado para encontrar e obter o botão tendo “Button1” eu ia. Depois disso, o “AddEventListener ()” Método adicionará um "clique" evento que acionará o “DisplayDate ()” método:

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:

Depois de obter a saída, clique no “Clique em mim” Botão para conferir a hora e a data atual:

Exemplo 2: Usando o método do ouvinte DOM Efeer para adicionar vários manipuladores de eventos em javascript

JavaScript também oferece a funcionalidade para adicionar vários manipuladores de eventos para o mesmo objeto. Para demonstrar seu procedimento, escrevemos o seguinte programa JavaScript com um título, parágrafo e um botão tendo “Button1” eu ia. Observe que adicionaremos vários manipuladores de eventos para o "botão" Elemento HTML:

Adicione um manipulador de eventos em JavaScript

Este programa JavaScript utilizou o método addEventListener ()

Clique em mim

Na próxima etapa, nós iremos um "a" objeto que encontrará e obtenha o botão com “Button1” Id através da invocação do documento.getElementById () Método:

Acerte o “Clique em mim” Button, e você recebe dois alertas no seu navegador, um após o outro:

Exemplo 3: Usando o método do ouvinte de evento DOM para adicionar manipulador de eventos ao objeto de janela em javascript

No exemplo a seguir, estamos adicionando o método addEventListener () ao "janela" objeto. 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.

Nós também passaremos um "evento" Objeta ao método addEventListener (). O "evento" objeto compreende todas as informações relacionadas ao Mousedown evento:

A execução do programa JavaScript acima mencionado mostrará a seguinte saída:

Agora, pressione o "esquerda" botão do mouse sobre o elemento selecionado, e você verá o seguinte alerta:

Evento borbulhando em javascript

Em JavaScript, o evento Bubbling é um evento que borbulha do alvo ou dos elementos mais profundos para seus pais, então segue a abordagem de baixo para o topo e move o fluxo de controle para seus ancestrais. O Evento Bubling é considerado como método de fluxo de eventos padrão em todos os navegadores modernos.

Exemplo: Evento borbulhando em JavaScript

No exemplo a seguir, adicionamos um título com a tag, um elemento div com o id “ParentElement” e seu elemento de botão filho aninhado com o ID “Afibelement”:

Criança

Depois de atribuir os elementos HTML criados usando o "documento.QuerySelector () ” Método, adicionaremos um ouvinte de eventos a ambos “ParentElement” e está aninhado “Afibelement” botão. A função passada no “AddEventListener ()” exibirá a string adicionada na "console.registro()" método:

Agora, clicaremos no "Criança" Botão, que pode ser visto na seguinte saída:

Clicando no "Criança" Botão, o passado "função()" No método addEventListener () será executado. Então o “OnClick ()” Método do “Div” elemento será invocado. Tudo isso acontece por causa do “Evento borbulhando”:

No exemplo acima, quando clicamos no "Criança" botão, o "clique" Evento é passado do botão com ID “Afibelement” e o controle de fluxo de eventos se move para o "documento" Na seguinte ordem:

Captura de eventos em JavaScript

O processo em que um evento é capturado quando seu fluxo de controle se move do elemento superior para o alvo ou elemento mais externo é conhecido como captura de eventos. Embora os navegadores modernos não tenham a capacidade de permitir a captura de eventos por padrão, você pode executar esta operação através do código JavaScript.

Exemplo: Captura de eventos em JavaScript

Em nosso programa JavaScript, antes de tudo, adicionaremos um título e um “Div” elemento com identificação “ParentElement” e seu elemento filho com “Afibelement” eu ia:

Criança

Em seguida, vamos invocar o "documento.QuerySelector () ” Método para obter o elemento pai e filho:

A seguir "Criança" Botão primeiro invocará o evento adicionado ao elemento pai. Depois disso, ele executará o evento anexado ao destino do evento:

No exemplo acima, quando clicamos no "Criança" botão, o "clique" O evento é passado do elemento pai que é "documento", para o destino de evento especificado “Afibelement” botão:

Conclusão

Usando o método DOM addEventListener (), você pode adicionar um ouvinte de evento ao objeto da janela e elementos html. Sem substituir os manipuladores de eventos existentes, o método addEventListener () JavaScript atribui um manipulador de eventos ao objeto específico. Além disso, um único objeto de janela também pode ter vários manipuladores de eventos. Este artigo discutiu o método do ouvinte de evento DOM em JavaScript. Também explicamos o uso do método do ouvinte de eventos DOM para adicionar manipuladores únicos e múltiplos aos elementos html. Além disso, exemplos relacionados à borbulha e captura de eventos também são demonstrados.