Gerenciamento de Eventos
Gerenciamento de Eventos
Gerenciamento de Eventos é uma aula grátis de jQuery Academy no CoddyKit. Esta é a aula 1 de 1. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de jQuery Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de jQuery Academy inclui 1 aulas no total.
Introdução
Olá,
Ao apresentar o jQuery, dissemos que ele não serve apenas para a manipulação do DOM, mas também oferece um recurso importante, como o gerenciamento de eventos.
o que é um evento
Primeiro, vamos aprender o que é um evento.
Os eventos são gerados principalmente pelo usuário no navegador da web.
Podemos definir vários eventos causados pelo usuário, como tocar na tela em dispositivos móveis, mover o mouse, clicar em um botão e rolar a tela.
Como JavaScript é uma linguagem de programação, gerenciaremos o fluxo do nosso programa de acordo com os eventos que ocorrerem.
Clique
método click()
Vamos começar pelo evento mais simples, o evento de clique em um botão.
O método click() é usado para gerenciar eventos de clique em HTML.
Podemos escutar o evento de clique com a sintaxe abaixo.
$(selector).click(handler);
- Com $(selector), escolhemos qual elemento escutar.
- O handler representa a função de callback que será executada quando ocorrer um clique.
Vamos fazer um exemplo.
<button>Button</button>
<script>
/* Callback will run as son as
the DOM is loaded
*/
$(document).ready(function(){
$('button').click(function(){
alert('Button clicked');
});
})
</script>Aviso
O método click gerencia o clique no botão com a função anônima que recebe como argumento.
Duplo clique
Eventos do mouse
Abaixo estão alguns eventos que podem ser criados pelo usuário com o mouse.
Vamos clicar no botão!
<button>Coddy Button</button>
<script>
// runs when button is click
$("button").click(function(){
$('button').text('Clicked')
});
// runs when button is double click
$("button").dblclick(function(){
$('button').text('Double Clicked')
});
</script>Eventos do mouse
Observe que alguns eventos não podem ser testados no aplicativo móvel, pois eventos como Hover não podem ser executados em dispositivos móveis!
<button>Coddy Button</button>
<script>
/* It runs when the mouse
hovers over the button
*/
$("button").hover(function(){
$('button').text('Hovering...')
});
/*
It runs when the mouse
enters an element
*/
$("button").mouseenter(function(){
$('button').text('Mouse enter...')
});
/*
It runs when the mouse leaves
an element
*/
$("button").mouseleave(function(){
$('button').text('Mouse Leave...')
});
</script>Eventos do teclado
Agora aprenderemos como lidar com eventos do teclado.
Primeiro, vamos definir uma entrada e depois lidar com os eventos gerados por essa entrada.
<input type="text" id="name"
name="yourname"
placeholder="Enter your name" />
<p>Keyboard event: <span id="state"></span></p>
<script>
/*
Callback will run as son as
the DOM is loaded
*/
$(document).ready(function(){
/*
It runs every time we press
the keyboard key on the keyboard.
*/
$('#name').keydown(function(){
$('#state').text('Key down')
});
/*
It runs when we take our finger
off the keyboard key
*/
$('#name').keyup(function(){
$('#state').text('Key up')
});
// Runs when the user focuses on input.
$('#name').focus(function(){
$('#state').text('Focus')
});
/*
It works when we unfocus
from an input on the keyboard.
*/
$('#name').blur(function(){
$('#state').text('Blur')
});
})
</script>Eventos de formulário
Com jQuery, também podemos gerenciar eventos que ocorrem em formulários.
Ações como inserir dados em um campo ou fazer uma seleção na caixa de seleção são eventos de formulário.
Exemplo de evento de formulário
No código abaixo, são exemplificados vários eventos de formulário.
*
listen to the form with the coddyForm
id and run when submit button clicked
*/
$("#coddyForm").submit(
function(event){
});eventos da janela
Por fim, vamos ver os eventos da janela.
Talvez o evento de janela mais importante seja $(document).ready(), mas, como já aprendemos sobre esse evento, estudaremos outros eventos da janela.
método resize
método resize()
O método resize é associado ao objeto window do navegador e é acionado quando o tamanho da janela muda.
const window = {};
const $ = (obj) => ({
resize: (callback) => {
console.log("Resize event handler would be attached here.");
}
});
$(window).resize(function() {
//trigging when user change windows size
});método scroll
método scroll()
O método scroll() é associado a um elemento rolável ou ao objeto window e é acionado quando o usuário rola o componente correspondente.
$(window).scroll(function() {
//Calling when user scroll the window
});
$('#my-scrollable-element').scroll(function() {
//Calling when user scroll the cursor
//that inside the #my-scrollable-element element
});Parabéns
Parabéns 🎉
Aprendemos o gerenciamento de eventos em jQuery.
Na próxima seção, aprenderemos a lição sobre como criar animações com jQuery.
Aprenda JavaScript com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 22
- Aulas
- 48
Perguntas Frequentes
A aula “Gerenciamento de Eventos” é grátis?
Sim — o texto completo de “Gerenciamento de Eventos” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de jQuery Academy, atualize para CoddyKit PRO. O curso de jQuery Academy inclui 1 aulas no total.
O que vou aprender em “Gerenciamento de Eventos”?
Gerenciamento de Eventos Você pratica jQuery Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar jQuery Academy?
Nenhuma experiência prévia é necessária. jQuery Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 1.
Quanto tempo leva a aula “Gerenciamento de Eventos”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de jQuery Academy?
Sim. Cada aula de jQuery Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.