logo

TechCodeview

JavaScript addEventListener()

O addEventListener() O método é usado para anexar um manipulador de eventos a um elemento específico. Ele não substitui os manipuladores de eventos existentes. Diz-se que os eventos são uma parte essencial do JavaScript. Uma página da web responde de acordo com o evento ocorrido. Os eventos podem ser gerados pelo usuário ou por APIs. Um ouvinte de evento é um procedimento JavaScript que aguarda a ocorrência de um evento.

O método addEventListener() é uma função embutida de JavaScript . Podemos adicionar vários manipuladores de eventos a um elemento específico sem substituir os manipuladores de eventos existentes.

Sintaxe

 element.addEventListener(event, function, useCapture);

Embora tenha três parâmetros, os parâmetros evento e função são amplamente utilizados. O terceiro parâmetro é opcional para definir. Os valores desta função são definidos a seguir.

Valores de parâmetros

evento: É um parâmetro obrigatório. Pode ser definido como uma string que especifica o nome do evento.

Nota: Não use nenhum prefixo como 'on' com o valor do parâmetro. Por exemplo, use 'clique' em vez de 'onclick'.

função: Também é um parâmetro obrigatório. É um Função JavaScript que responde ao evento ocorrer.

operadores java

usarCaptura: É um parâmetro opcional. É um valor do tipo booleano que especifica se o evento é executado na fase de bolha ou captura. Seus valores possíveis são verdadeiro e falso . Quando definido como verdadeiro, o manipulador de eventos é executado na fase de captura. Quando definido como falso, o manipulador é executado na fase de bolha. Seu valor padrão é falso .

Vamos ver algumas ilustrações do uso do método addEventListener().

Exemplo

É um exemplo simples de uso do método addEventListener(). Temos que clicar no dado Botão HTML para ver o efeito.

Exemplo do método addEventListener().

Clique no botão a seguir para ver o efeito.

Clique em mim document.getElementById('btn').addEventListener('click', fun); function fun() { document.getElementById('para').innerHTML = 'Olá Mundo' + '
' + 'Bem-vindo ao javaTpoint.com'; }Teste agora

Saída

JavaScript addEventListener()

Depois de clicar no botão HTML fornecido, a saída será -

aprimorado para loop java
JavaScript addEventListener()

Agora, no próximo exemplo veremos como adicionar muitos eventos ao mesmo elemento sem sobrescrever os eventos existentes.

Exemplo

Neste exemplo, estamos adicionando vários eventos ao mesmo elemento.

Este é um exemplo de adição de vários eventos ao mesmo elemento.

Clique no botão a seguir para ver o efeito.

Clique em mim function fun() { alert('Bem-vindo ao javaTpoint.com'); } function fun1() { document.getElementById('para').innerHTML = 'Esta é a segunda função'; } function fun2() { document.getElementById('para1').innerHTML = 'Esta é a terceira função'; } var meubtn = document.getElementById('btn'); mybtn.addEventListener('clique', divertido); mybtn.addEventListener('clique', fun1); mybtn.addEventListener('clique', fun2);Teste agora

Saída

JavaScript addEventListener()

Agora, ao clicarmos no botão, um alerta será exibido. Depois de clicar no botão HTML fornecido, a saída será -

JavaScript addEventListener()

Quando saímos do alerta, a saída é -

JavaScript addEventListener()

Exemplo

Neste exemplo, estamos adicionando vários eventos de um tipo diferente ao mesmo elemento.

Este é um exemplo de adição de vários eventos de tipos diferentes ao mesmo elemento.

pontos de primavera

Clique no botão a seguir para ver o efeito.

Unix x Windows
Clique em mim function fun() { btn.style.width = '50px'; btn.style.height = '50px'; btn.style.background = 'amarelo'; btn.style.color = 'azul'; } function fun1() { document.getElementById('para').innerHTML = 'Esta é a segunda função'; } função fun2() { btn.style.width = ''; btn.style.height = ''; btn.style.background = ''; btn.style.color = ''; } var meubtn = document.getElementById('btn'); mybtn.addEventListener('mouseover', divertido); mybtn.addEventListener('clique', fun1); mybtn.addEventListener('mouseout', fun2);Teste agora

Saída

JavaScript addEventListener()

Quando movemos o cursor sobre o botão, a saída será -

JavaScript addEventListener()

Após clicar no botão e deixar o cursor, a saída será -

JavaScript addEventListener()

Borbulhamento de eventos ou captura de eventos

Agora, entendemos o uso do terceiro parâmetro de addEventListener() do JavaScript, ou seja, usarCapture.

Em HTML DOM, Borbulhando e Capturando são as duas formas de propagação de eventos. Podemos entender essas maneiras tomando um exemplo.

Suponha que temos um elemento div e um elemento de parágrafo dentro dele, e estamos aplicando o 'clique' evento para ambos usando o addEventListener() método. Agora a questão é clicar no elemento do parágrafo, qual evento de clique do elemento é tratado primeiro.

Então, em Borbulhando, o evento do elemento parágrafo é tratado primeiro e, em seguida, o evento do elemento div é tratado. Isso significa que no borbulhamento, o evento do elemento interno é tratado primeiro e, em seguida, o evento do elemento mais externo será tratado.

Em Capturando o evento do elemento div é tratado primeiro e, em seguida, o evento do elemento parágrafo é tratado. Isso significa que na captura o evento do elemento externo é tratado primeiro e depois o evento do elemento mais interno será tratado.

construtor de cordas 
 addEventListener(event, function, useCapture);

Podemos especificar a propagação usando o usarCapture parâmetro. Quando definido como falso (que é seu valor padrão), então o evento utiliza propagação borbulhante, e quando definido como verdadeiro, há a propagação de captura.

Podemos entender o borbulhando e capturando usando uma ilustração.

Exemplo

Neste exemplo, existem dois elementos div. Podemos ver o efeito de bolha no primeiro elemento div e o efeito de captura no segundo elemento div.

Quando clicamos duas vezes no elemento span do primeiro elemento div, o evento do elemento span é tratado primeiro do que o elemento div. É chamado borbulhando .

Mas quando clicamos duas vezes no elemento span do segundo elemento div, o evento do elemento div é tratado primeiro do que o elemento span. É chamado capturando .

 div{ background-color: lightblue; border: 2px solid red; font-size: 25px; text-align: center; } span{ border: 2px solid blue; } This is a div element. <br> <br> <span id="s2"> This is a span element. </span> document.getElementById(&apos;d1&apos;).addEventListener(&apos;dblclick&apos;, function() {alert(&apos;You have double clicked on div element&apos;)}, false); document.getElementById(&apos;s1&apos;).addEventListener(&apos;dblclick&apos;, function() {alert(&apos;You have double clicked on span element&apos;)}, false); document.getElementById(&apos;d2&apos;).addEventListener(&apos;dblclick&apos;, function() {alert(&apos;You have double clicked on div element&apos;)}, true); document.getElementById(&apos;s2&apos;).addEventListener(&apos;dblclick&apos;, function() {alert(&apos;You have double clicked on span element&apos;)}, true);
Teste agora

Saída

JavaScript addEventListener()

Temos que clicar duas vezes nos elementos específicos para ver o efeito.