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.
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á -
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.
Clique no botão a seguir para ver o efeito.
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 agoraSaí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.
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.
