Fundamentos de Eventos jQuery

Introdução

Bem-vindo à documentação do jQuery! Este laboratório irá fornecer uma introdução aos Eventos do jQuery.

O jQuery oferece métodos simples para anexar manipuladores de eventos a seleções. Quando um evento ocorre, a função fornecida é executada. Dentro da função, this se refere ao elemento DOM que iniciou o evento.

A função de manipulação de eventos pode receber um objeto de evento. Este objeto pode ser usado para determinar a natureza do evento e para impedir o comportamento padrão do evento.

Configurando Respostas a Eventos em Elementos DOM

index.html já foi fornecido na VM.

O jQuery torna simples a configuração de respostas orientadas a eventos em elementos da página. Esses eventos são frequentemente acionados pela interação do usuário final com a página, como quando o texto é inserido em um elemento de formulário ou o ponteiro do mouse é movido. Em alguns casos, como os eventos de carregamento e descarregamento da página, o próprio navegador acionará o evento.

O jQuery oferece métodos convenientes para a maioria dos eventos nativos do navegador. Esses métodos — incluindo .click(), .focus(), .blur(), .change(), etc. — são abreviações do método .on() do jQuery. O método on é útil para vincular a mesma função de manipulador a vários eventos, quando você deseja fornecer dados ao manipulador de eventos, quando está trabalhando com eventos personalizados ou quando deseja passar um objeto de vários eventos e manipuladores.

// Configuração de evento usando um método conveniente
$("p").click(function () {
  console.log("You clicked a paragraph!");
});

// Configuração de evento equivalente usando o método `.on()`
$("p").on("click", function () {
  console.log("click");
});

Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Estendendo Eventos a Novos Elementos da Página

É importante notar que .on() só pode criar ouvintes de eventos em elementos que existem no momento em que você configura os ouvintes. Por exemplo:

$(document).ready(function () {
  // Now create a new button element with the alert class.
  $("<button class='alert'>Alert!</button>").appendTo(document.body);
  // Sets up click behavior on all button elements with the alert class
  // that exist in the DOM when the instruction was executed
  $("button.alert").on("click", function () {
    console.log("A button with the alert class was clicked!");
  });
});

Se elementos semelhantes forem criados após a configuração dos ouvintes de eventos, eles não herdarão automaticamente os comportamentos de evento que você configurou anteriormente.

Você pode atualizar a aba Web 8080 para visualizar a página web.

Configurando Múltiplas Respostas a Eventos

Com bastante frequência, os elementos em sua aplicação serão vinculados a múltiplos eventos. Se múltiplos eventos devem compartilhar a mesma função de tratamento (handler), você pode fornecer os tipos de evento como uma lista separada por espaços para .on():

// Múltiplos eventos, mesmo manipulador (handler)
$("div").on(
  "click change", // Vincular manipuladores (handlers) para múltiplos eventos
  function () {
    console.log("An input was clicked or changed!");
  }
);

Quando cada evento tem seu próprio manipulador (handler), você pode passar um objeto para .on() com um ou mais pares chave/valor, sendo a chave o nome do evento e o valor a função para tratar o evento.

// Vinculando múltiplos eventos com diferentes manipuladores (handlers)
$("div").on({
  click: function () {
    console.log("clicked!");
  },
  mouseover: function () {
    console.log("hovered!");
  }
});

Você pode atualizar a aba Web 8080 para visualizar a página web.

Resumo

Parabéns! Você concluiu o laboratório de Fundamentos de Eventos jQuery. Para saber mais sobre a API jQuery, consulte a documentação oficial do jQuery.