Rodrigo Brito

Aplicando interatividade no DOM através eventos

Para os exemplos será utilizado o conteúdo do projeto. Caso queira o montar em seu ambiente de desenvolvimento, leia o conteúdo do JS-0302 - JavaScript Completo ES6 - Início do Projeto Prático.

O método utilizado para adicionar eventos para um elemento é o addEventListener. Este método adiciona uma função ao elemento, chamado de callback (função passada como argumento a outra função que executa uma rotina ou ação) que será ativada assim que determinado evento ocorrer no elemento selecionado.

Para utilizar o addEventListener é necessário passar como parâmetro o evento (type), callback (listener) e um terceiro parâmetro opcional (options useCapture e/ou wantUntrusted) definidos por padrão como false. A opção useCapture é utilizada para enviar eventos ao listener em um nível mais aprofundado das fases de evento no DOM  e o  wantUntrusted permite a interação da página por elementos não confiáveis para o disparo de eventos. Posteriormente estas opções serão abordadas em um suas especificidades.

Exemplo de evento acionado ao clicar em uma imagem:

Como boa prática, é recomendável separar a função de callback do addEventListener. Nesse caso o listener será uma função declarada ao invés de ser uma função anônima passada diretamente (sem a ativação por parênteses). Ex:

Ainda é possível a utilização de arrow function. Ex:

No callback, é recebido como primeiro parâmetro o evento acionador, comumente nomeado como "event"ou"e". No caso do evento click, este é o primeiro parâmetro do callback, e retorna um objeto da interface MouseEvent (tudo é objeto em JS!). Este objeto contém uma série de propriedades e métodos para o evento click. Ex:

As propriedades de event podem ser acessadas através da "dot notation" (ponto), e os seus métodos estarão a disposição. Ex utilizando a lista das fotos ("ul"), de classe "skills-list":

Um método muito utilizado no callback é o event.preventDefault(). Sua função é previnir um comportamento padrão do evento no browser, tal como um link que não deve ser ativado antes de um evento ocorrer. Ex:

Desta forma, mesmo clicando no link que abriria minha página externa, essa ação não ocorre e é retornado a propriedade href do currentTarget do event (a tag "a").

A plavra reservada this, já abordada no post JS-0206, pode fazer referência a diferentes objetos dependendo do contexto. No caso de eventos, o this fará referência ao elemento em que addEventListener foi adicionado (event.currentTarget), permitindo o uso de métodos e propriedades do evento através da notação "this." e

geralmente tem o mesmo valor do event.currentTarget. Ex:

Eventos podem ser adicionados, sozinhos ou em conjunto, a diferentes elementos do DOM, incluindo o window e o document. Existem diversos eventos, tais como click, scroll, resize, keydown, keyup, mouseenter etc. Para conhecer estes eventos consulte a documentação do Developer Mozilla clicando aqui.

O método addEventListener é adicionado a um único elemento. Para adicionar este método a vários elementos é necessário realizar um loop entre elementos de uma lista, podendo ser utilizado para este fim o forEach para adiconar o evento para cada elemento. Ex:

Desta forma, o evento será adiconado para cada imagem específica e cada clique o evento será ativado.