Tratamento de eventos em JavaScript – Acervo Lima Tutorials

Resumo : neste tutorial, você aprenderá as diversas maneiras de realizar a manipulação de eventos em JavaScript.

Quando ocorre um evento , você pode criar um manipulador de eventos que é um trecho de código que será executado para responder a esse evento. Um manipulador de eventos também é conhecido como ouvinte de eventos . Ele escuta o evento e responde de acordo com os disparos do evento.

Um ouvinte de evento é uma função com um nome explícito se você pretende reutilizá-la ou uma função anônima se você a usar apenas uma vez.

Um evento pode ser tratado por um ou vários manipuladores de eventos. Se um evento tiver vários manipuladores de eventos, todos os manipuladores de eventos serão executados quando o evento for disparado.

Existem três maneiras de atribuir manipuladores de eventos.

1) Atributos do manipulador de eventos HTML

Os manipuladores de eventos normalmente têm nomes que começam com on, por exemplo, o manipulador de eventos do clickevento é onclick.

Para atribuir um manipulador de eventos a um evento associado a um elemento HTML, você pode usar um atributo HTML com o nome do manipulador de eventos. Por exemplo, para executar algum código quando um botão é clicado, você usa o seguinte:

<input type="button" value="Save" onclick="alert('Clicked!')">Linguagem de código:  HTML, XML  ( xml )

Neste caso, ao clicar no botão, a caixa de alerta é mostrada.

Ao atribuir o código JavaScript como o valor do onclickatributo, você precisa escapar dos caracteres HTML, como e comercial ( &), aspas duplas ( "), menor que ( <), etc., ou obterá um erro de sintaxe.

Um manipulador de eventos definido no HTML pode chamar uma função definida em um script. Por exemplo:

<script>
    function showAlert() {
        alert('Clicked!');
    }
</script>
<input type="button" value="Save" onclick="showAlert()">Linguagem de código:  HTML, XML  ( xml )

Neste exemplo, o botão chama a showAlert()função quando é clicado.

A showAlert()é uma função definida em um <script>elemento separado e pode ser colocada em um arquivo JavaScript externo.

Anotações importantes

A seguir estão alguns pontos importantes ao usar os manipuladores de eventos como atributos do elemento HTML:

Primeiro, o código no manipulador de eventos pode acessar o eventobjeto sem defini-lo explicitamente:

<input type="button" value="Save" onclick="alert(event.type)">Linguagem de código:  HTML, XML  ( xml )

Segundo, o thisvalor dentro do manipulador de eventos é equivalente ao elemento alvo do evento:

<input type="button" value="Save" onclick="alert(this.value)">Linguagem de código:  HTML, XML  ( xml )

Terceiro, o manipulador de eventos pode acessar as propriedades do elemento, por exemplo:

<input type="button" value="Save" onclick="alert(value)">Linguagem de código:  HTML, XML  ( xml )

Desvantagens de usar atributos do manipulador de eventos HTML

Atribuir manipuladores de eventos usando atributos de manipuladores de eventos HTML é considerado uma má prática e deve ser evitado tanto quanto possível pelos seguintes motivos:

Primeiro, o código do manipulador de eventos é misturado ao código HTML, o que tornará o código mais difícil de manter e estender.

Em segundo lugar, é uma questão de tempo. Se o elemento for totalmente carregado antes do código JavaScript, os usuários poderão começar a interagir com o elemento na página da web, o que causará um erro.

Por exemplo, suponha que a seguinte showAlert()função esteja definida em um arquivo JavaScript externo:

<input type="button" value="Save" onclick="showAlert()">Linguagem de código:  HTML, XML  ( xml )

E quando a página está totalmente carregada e o JavaScript não foi carregado, a showAlert()função é indefinida. Se os usuários clicarem no botão neste momento, ocorrerá um erro.

2) Manipuladores de eventos DOM nível 0

Cada elemento possui propriedades de manipulador de eventos, como onclick. Para atribuir um manipulador de eventos, defina a propriedade como uma função conforme mostrado no exemplo:

let btn = document.querySelector('#btn');

btn.onclick = function() {
    alert('Clicked!');
};Linguagem de código:  JavaScript  ( javascript )

Neste caso, a função anônima torna-se o método do buttonelemento. Portanto, o thisvalor é equivalente ao elemento. E você pode acessar as propriedades do elemento dentro do manipulador de eventos:

let btn = document.querySelector('#btn');

btn.onclick = function() {
    alert(this.id); 
};Linguagem de código:  JavaScript  ( javascript )

Saída:

btn

Usando o thisvalor dentro do manipulador de eventos, você pode acessar as propriedades e métodos do elemento.

Para remover o manipulador de eventos, defina o valor da propriedade do manipulador de eventos como null:

btn.onclick = null;Linguagem de código:  JavaScript  ( javascript )

Os manipuladores de eventos DOM nível 0 ainda são amplamente usados devido à sua simplicidade e suporte entre navegadores.

3) Manipuladores de eventos DOM Nível 2

Os manipuladores de eventos DOM nível 2 fornecem dois métodos principais para lidar com o registro/cancelamento de ouvintes de eventos:

addEventListener()– registrar um manipulador de eventos
removeEventListener()– remover um manipulador de eventos

Esses métodos estão disponíveis em todos os nós DOM.

O método addEventListener()

O addEventListener()método aceita três argumentos: um nome de evento, uma função de manipulador de eventos e um valor booleano que instrui o método a chamar o manipulador de eventos durante a fase de captura ( true) ou durante a fase de bolha ( false). Por exemplo:

let btn = document.querySelector('#btn');
btn.addEventListener('click',function(event) {
    alert(event.type); // click
});Linguagem de código:  JavaScript  ( javascript )

É possível adicionar vários manipuladores de eventos para lidar com um único evento, como este:

let btn = document.querySelector('#btn');
btn.addEventListener('click',function(event) {
    alert(event.type); // click
});

btn.addEventListener('click',function(event) {
    alert('Clicked!');
});Linguagem de código:  JavaScript  ( javascript )

O método removeEventListener()

Remove removeEventListener()um ouvinte de evento que foi adicionado por meio do arquivo addEventListener(). No entanto, você precisa passar os mesmos argumentos que foram passados para o arquivo addEventListener(). Por exemplo:

let btn = document.querySelector('#btn');

// add the event listener
let showAlert = function() {
    alert('Clicked!');
};
btn.addEventListener('click', showAlert);

// remove the event listener
btn.removeEventListener('click', showAlert);
Linguagem de código:  JavaScript  ( javascript )

Usar um ouvinte de evento anônimo como o seguinte não funcionará:

let btn = document.querySelector('#btn');
btn.addEventListener('click',function() {
   alert('Clicked!');
});

// won't work
btn.removeEventListener('click', function() {
   alert('Clicked!');
});Linguagem de código:  JavaScript  ( javascript )

Resumo

Existem três maneiras de atribuir um manipulador de eventos: atributo do manipulador de eventos HTML, propriedade do manipulador de eventos do elemento e addEventListener().
Deve-se evitar atribuir um manipulador de eventos por meio do atributo do manipulador de eventos HTML.

Eventos JavaScript

Eventos de carregamento de página JavaScript