Em jQuery, um evento é uma ação realizada pelo utilizador ou pelo navegador, como clicar num botão, passar o rato sobre um elemento ou escrever num campo de texto. O jQuery permite associar facilmente funções a esses eventos.

A estrutura base para trabalhar com eventos é a seguinte:

Evento click()

O evento mais utilizado é o click(), que é executado quando o utilizador clica num elemento.

HTML:

jQuery:

Sempre que o botão for clicado, o texto do parágrafo é alterado.

Evento dblclick()

O evento dblclick() é acionado quando o utilizador faz duplo clique.

Evento hover()

O hover() permite definir ações para quando o rato entra e sai de um elemento.

Evento keyup()

O evento keyup() é utilizado para detetar quando o utilizador escreve num campo de texto.

HTML:

jQuery:

À medida que o utilizador escreve, o texto é atualizado no parágrafo.

Evento change()

O change() é usado quando o valor de um campo é alterado, como numa lista de seleção.

HTML:

jQuery:

Utilização do this em eventos

O this é especialmente útil em eventos, pois refere-se ao elemento que originou a ação.

Apenas o parágrafo clicado será escondido.

Exercício 1 — Botões interativos

Cria uma página HTML com:

• Dois botões

• Um parágrafo

Quando:

• O primeiro botão for clicado, o texto do parágrafo deve mudar

• O segundo botão for clicado, o parágrafo deve ser escondido

Exercício 2 — Campo de texto dinâmico

Cria um campo de texto que:

• Mostre em tempo real, num parágrafo, tudo o que o utilizador escreve