Conforme Zabot e Matos (2020), o JavaScript e, consequentemente, o jQuery interagem com os elementos HTML por meio de eventos que acontecem em diferentes situações: um click em um botão, o movimento de passar com o mouse sobre um elemento da página, a pressão do dedo sobre a tela de um dispositivo touch e quando o navegador termina de carregar a página web.
Sobre o uso de jQuery/JavaScript, analise o código abaixo:
1. $('#box87').on('click', fx)
2. function fx(event){
3. $('#box87').css('width', 400)
4. }
Assinale a alternativa que descreve o resultado CORRETO.
a.
Na linha 1, é definido um observador do evento click sobre o elemento “box87”, e é indicado o evento “fx” como gerenciador da função. Na linha 2, o evento “fx” recebe automaticamente um parâmetro, que é a função que gerou a chamada. Na linha 3, o evento seleciona novamente o “box87” e modifica sua largura com o método CSS. Por fim, a linha 4 apenas encerra o código.
b.
Na linha 1, é definido um observador do evento largura do elemento “box87”, e é indicada a função “fx” como gerenciador do evento. Na linha 2, a função “fx” recebe automaticamente um parâmetro, que é o evento que gerou a chamada. Na linha 3, o observador seleciona novamente o “box87” e modifica sua largura com o método CSS. Por fim, a linha 4 apenas encerra o código.
c.
Na linha 1, é definida uma função do tipo evento click sobre o elemento “box87”, e é indicado o observador “fx” como gerenciador do evento. Na linha 2, o observador “fx” recebe automaticamente um parâmetro, que é o evento que gerou a chamada. Na linha 3, o observador seleciona novamente o “box87” e modifica sua largura com o método CSS. Por fim, a linha 4 apenas encerra o código.
d.
Na linha 1, é definido um observador do evento click sobre o elemento “box87”, e é indicada a função “fx” como gerenciador do evento. Na linha 2, a função “fx” recebe automaticamente um parâmetro, que é o evento que gerou a chamada. Na linha 3, a função seleciona novamente o “box87” e modifica sua largura com o método CSS. Por fim, a linha 4 apenas encerra o código.
e.
Na linha 1, é definida uma função do tipo observador click sobre o elemento “box87”, e é indicado o objeto “fx” como gerenciador do evento. Na linha 2, o objeto “fx” recebe automaticamente um parâmetro, que é o observador que gerou a chamada. Na linha 3, o objeto seleciona novamente o “box87” e modifica sua largura com o método CSS. Por fim, a linha 4 apenas encerra o código.
Soluções para a tarefa
Resposta:
d. Na linha 1, é definido um observador do evento click sobre o elemento “box87”, e é indicada a função “fx” como gerenciador do evento. Na linha 2, a função “fx” recebe automaticamente um parâmetro, que é o evento que gerou a chamada. Na linha 3, a função seleciona novamente o “box87” e modifica sua largura com o método CSS. Por fim, a linha 4 apenas encerra o código.
Explicação:
Para poder capturar um evento, é preciso estabelecer um “observador” (listener), que fica esperando o evento ocorrer, além de indicar o que fazer quando o evento ocorre. Para isso, utiliza-se o método “on”, que aponta o evento observado e a função para gerenciá-lo (linha 1). Dentro do código exemplificado, a função “fx” recebe automaticamente como parâmetro o evento que gerou a chamada (linha 2). Por fim, a função seleciona novamente o elemento “box87” e modifica a largura para 400 com o método CSS (linha 3) e encerra o código (linha 4).