Event Listener

Os Event Listeners são procedimentos do JavaScript que esperam por um evento

acontecer, como o clique do mouse ou um botão específico do teclado, para executar algo
no DOM. (Para uma lista completa de eventos possíveis, clique aqui)

Também existem os Event Handlers, que são a forma que adicionamos não só o
Event Listener, especficando qual o tipo de evento, mas também o que será executado a
partir daí através de uma função.

Por exemplo, o método addEventListener(event, function*, useCapture) é um

Event Handler nativo do jS que pega qual será o evento, através do parâmetro "event", e o
que será executado após a ocorrência do evento, através do parâmetro "function". O
parâmetro de "useCapture" é um pouco mais complexo, tratando da propagação de
eventos.

Todos os Event Listeners podem ser removidos através do método

removeEventListener(event, function), que deve receber os mesmos elementos, event e
function do Evento que será removido.

Também vale ressaltar que, diferente de propriedades do HTML, onde ao tentar

adicionar duas iguais (por exemplo, adicionar dois "onclick"s) sobrescreveria a anterior,
podem ser atribuidos diversos Event Listeners a um único elemento sem que ele seja
sobrescrito, mas sim adicionado, sem limites pré-definidos.

*: É possível passar funções anônimas no campo da function, e também é possível passar

parâmetros para fazer o callback de outras funções desta forma.

A propagação de eventos é uma forma de definar a ordem em que elementos

devem ocorrer quando existem múltiplos eventos similares na mesma seção. Como por
exemplo, um elemento <p> dentro de uma <div>, onde ambos tem um evento "click", o
useCapture irá definir qual evento será tratado primeiro com base em dois tratamentos
possíveis:

 Event Bubbling: Nesse tratamento, o elemento mais interno é tratado primeiro,

e depois o externo. Nesse exemplo, o evento de <p> seria executado primeiro, e
depois o evento da <div>.
  Event Capturing: Nesse tratamento, é o inverso. Primeiro será tratado o
elemento mais externo, no caso, a <div>, e após isso o mais interno, <p>.

Qual forma de tratamento será utilizada vai depender de um valor Boolean no

parâmetro de useCapture. Caso seja passado false, que é o padrão caso nenhum valor
seja atribuido, o tratamento será de Bubbling. Caso seja true, o tratamento será de
Capturing.

Caso seja necessário que apenas um dos eventos ocorra sem acarretar o próximo,
é possível utilizar o método stopPropagation(), fazendo assim com a execuçao dos
eventos, seja o tratamento de Bubbling ou Capturing, cesse.

Para isso, a função que está rodando deverá receber um parâmetro "event", que é
um objeto contendo a informação do evento, para que possa haver um callback do
método em relação a este parâmetro.