Como adicionar um manipulador de eventos a um elemento em JavaScript
Como adicionar um manipulador de eventos a um elemento em JavaScript
JavaScript fornece addEventListener () que permite adicionar um manipulador de eventos a um elemento HTML. Este método liga um evento a um elemento HTML, além disso, adiciona um manipulador de eventos a um elemento HTML específico sem substituir nenhum manipulador de eventos que já exista nesse elemento.
Sintaxe
elemento.addEventListener (EventType, EventListener);
Exemplo
Suponha que você queira adicionar um manipulador de eventos que ligue o evento de clique a um elemento.
No exemplo acima, estamos criando um botão usando a seguinte parte do código.
Usando o método addEventListener (), estamos anexando um evento de clique no botão.
documento.getElementById ("botão").addEventListener ("clique", functionName);function functionName ()
documento.getElementById ("tutorial").INNERHTML = "Você clicou em mim!";
Quando você clica no botão, uma nota será parecida dizendo que você acabou de clicar no botão. Nós mostramos a saída abaixo.
Mais sobre manipuladores de eventos!
1. É possível adicionar vários manipuladores de eventos ou vários manipuladores de eventos do mesmo tipo a um determinado elemento.
Exemplo
A seguir, é apresentado um exemplo de adição de dois eventos de KeyPress a um campo de entrada usando o método addEventListener ().
No exemplo acima, a seguinte parte do código adiciona dois eventos de KeyPress a um campo de entrada.
function FirstFunction ()Alert ("Primeiro evento KeyPress aconteceu!");
função SecondFunction ()
Alert ("Segundo evento KeyPress aconteceu!");
Quando você pressiona uma tecla de teclado enquanto estiver dentro do campo de entrada, o primeiro evento do KeyPress ocorrerá.
Depois de clicar em OK na caixa de diálogo, o Second Keypress acontecerá.
2. Os manipuladores de eventos também podem ser adicionados aos objetos DOM.
3. Os manipuladores de eventos dedicam o comportamento dos eventos sobre como eles reagem ao borbulhar.
4. Para aumentar a legibilidade, JavaScript se divide da marcação HTML quando o método addEventListener () é usado.
5. Ao usar o método addEventListener (), você também pode usar a borbulha de eventos ou a captura de eventos, mas é totalmente opcional.
No evento, borbulhando o evento de elementos mais internos é operado primeiro e o evento de elementos mais externos posteriormente. No entanto, em eventos, captura o evento do elemento mais externo é operado primeiro e o evento de elemento mais interno mais tarde.
A sintaxe para usar a borbulha de eventos e a captura de eventos é a seguinte.
elemento.addEventListener (evento, função, usecapture);
Observação: Na sintaxe acima, por padrão, o valor do parâmetro é falso que significa que a borbulha do evento ocorrerá, mas se você passar o valor do parâmetro como verdadeiro, a captura de eventos acontecerá.
Exemplo
A seguir, um exemplo de propagação borbulhante.
Isso é propagação borbulhante.
No exemplo acima, estamos criando um
elemento como elemento pai e elemento como elemento filho.
Isso é propagação borbulhante.
Usando então usado para adicionar um evento de clique usando o método addEventListener () junto com a propagação borbulhante.
documento.getElementById ("Button1").addEventListener ("clique", function ()alerta ("Você clicou no botão!");
, false);
documento.getElementById ("para1").addEventListener ("clique", function ()
Alerta ("Você clicou no parágrafo!");
, false);
Ao executar este programa e clique no botão primeiro, depois a propagação borbulhante operará o evento de clique no botão (elemento mais interno) primeiro e o parágrafo (elemento externo mais elevado) posteriormente. Aqui está a saída.
Agora, quando você clicará em OK, a propagação borbulhante será executada no evento de clique no parágrafo.
Usando o mesmo exemplo, se você passar o valor do parâmetro como verdadeiro, a captura de propagação acontecerá.
Isso é propagação borbulhante.
Se você clicar no elemento filho (botão) primeiro, a captura de propagação operará o evento de clique no parágrafo (elemento mais externo) primeiro e botão (elemento mais interno) posteriormente. Nós mostramos a saída abaixo.
Depois de clicar em OK, clique no evento acontecerá no elemento.
6. Também é possível remover um manipulador de eventos usando o método RemoneventListener ().
Conclusão
JavaScript fornece um método addEventListener () que permite vincular um manipulador de eventos a um elemento. Você pode anexar vários manipuladores de eventos do mesmo tipo a um elemento específico, além disso, além dos elementos HTML, você também pode adicionar manipuladores de eventos aos objetos DOM. Você também pode adicionar propagação borbulhante e captura de propagação usando o método addEventListener (). Este artigo discute em detalhes, abordagens de adição de manipuladores de eventos a um elemento usando JavaScript junto com exemplos adequados.