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
Depois de clicar no botão HTML fornecido, a saída será -
aprimorado para loop java
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 agoraSaída
Agora, ao clicarmos no botão, um alerta será exibido. Depois de clicar no botão HTML fornecido, a saída será -
Quando saímos do alerta, a saída é -
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 WindowsClique 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
Quando movemos o cursor sobre o botão, a saída será -
Após clicar no botão e deixar o cursor, a saída será -
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('d1').addEventListener('dblclick', function() {alert('You have double clicked on div element')}, false); document.getElementById('s1').addEventListener('dblclick', function() {alert('You have double clicked on span element')}, false); document.getElementById('d2').addEventListener('dblclick', function() {alert('You have double clicked on div element')}, true); document.getElementById('s2').addEventListener('dblclick', function() {alert('You have double clicked on span element')}, true);Teste agora
Saída
Temos que clicar duas vezes nos elementos específicos para ver o efeito.